diff --git a/apps/v4/app/(app)/create/components/style-picker.tsx b/apps/v4/app/(app)/create/components/style-picker.tsx
index 5d2dc2f975..81248b1761 100644
--- a/apps/v4/app/(app)/create/components/style-picker.tsx
+++ b/apps/v4/app/(app)/create/components/style-picker.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 
-import { type Style, type StyleName } from "@/registry/config"
+import { PRESETS, type Style, type StyleName } from "@/registry/config"
 import { LockButton } from "@/app/(app)/create/components/lock-button"
 import {
   Picker,
@@ -53,7 +53,24 @@ export function StylePicker({
           <PickerRadioGroup
             value={currentStyle?.name}
             onValueChange={(value) => {
-              setParams({ style: value as StyleName })
+              const styleName = value as StyleName
+              const preset = PRESETS.find(
+                (p) => p.base === params.base && p.style === styleName
+              )
+              setParams({
+                style: styleName,
+                ...(preset && {
+                  baseColor: preset.baseColor,
+                  theme: preset.theme,
+                  chartColor: preset.chartColor,
+                  iconLibrary: preset.iconLibrary,
+                  font: preset.font,
+                  fontHeading: preset.fontHeading,
+                  menuAccent: preset.menuAccent,
+                  menuColor: preset.menuColor,
+                  radius: preset.radius,
+                }),
+              })
             }}
           >
             <PickerGroup>
diff --git a/apps/v4/app/(app)/create/lib/fonts.ts b/apps/v4/app/(app)/create/lib/fonts.ts
index 7deda364ff..1b8862b85e 100644
--- a/apps/v4/app/(app)/create/lib/fonts.ts
+++ b/apps/v4/app/(app)/create/lib/fonts.ts
@@ -1,5 +1,6 @@
 import {
   DM_Sans,
+  EB_Garamond,
   Figtree,
   Geist,
   Geist_Mono,
@@ -149,6 +150,11 @@ const playfairDisplay = Playfair_Display({
   variable: "--font-playfair-display",
 })
 
+const ebGaramond = EB_Garamond({
+  subsets: ["latin"],
+  variable: "--font-eb-garamond",
+})
+
 const PREVIEW_FONTS = {
   geist: geistSans,
   inter,
@@ -174,6 +180,7 @@ const PREVIEW_FONTS = {
   merriweather,
   lora,
   "playfair-display": playfairDisplay,
+  "eb-garamond": ebGaramond,
 } satisfies Record<FontName, PreviewFont>
 
 function createFontOption(name: FontName) {
@@ -216,6 +223,7 @@ export const FONTS = [
   createFontOption("merriweather"),
   createFontOption("lora"),
   createFontOption("playfair-display"),
+  createFontOption("eb-garamond"),
 ] as const
 
 export type Font = (typeof FONTS)[number]
diff --git a/apps/v4/lib/font-definitions.ts b/apps/v4/lib/font-definitions.ts
index b4df49d6ed..80afe1437e 100644
--- a/apps/v4/lib/font-definitions.ts
+++ b/apps/v4/lib/font-definitions.ts
@@ -301,6 +301,18 @@ export const FONT_DEFINITIONS = [
     dependency: "@fontsource-variable/playfair-display",
     subsets: ["latin"],
   },
+  {
+    name: "eb-garamond",
+    title: "EB Garamond",
+    type: "serif",
+    family: "'EB Garamond Variable', serif",
+    registryVariable: "--font-serif",
+    previewVariable: "--font-eb-garamond",
+    provider: "google",
+    import: "EB_Garamond",
+    dependency: "@fontsource-variable/eb-garamond",
+    subsets: ["latin"],
+  },
 ] as const satisfies readonly FontDefinition[]
 
 export type FontName = (typeof FONT_DEFINITIONS)[number]["name"]
diff --git a/apps/v4/public/r/config.json b/apps/v4/public/r/config.json
index a0c28d6547..3e972fcf69 100644
--- a/apps/v4/public/r/config.json
+++ b/apps/v4/public/r/config.json
@@ -219,15 +219,15 @@
     {
       "name": "radix-sera",
       "title": "Sera (Radix)",
-      "description": "Sera / Lucide / Inter + Playfair Display",
+      "description": "Sera / Lucide / Noto Sans + EB Garamond",
       "base": "radix",
       "style": "sera",
-      "baseColor": "neutral",
-      "theme": "neutral",
-      "chartColor": "neutral",
+      "baseColor": "taupe",
+      "theme": "taupe",
+      "chartColor": "taupe",
       "iconLibrary": "lucide",
-      "font": "inter",
-      "fontHeading": "playfair-display",
+      "font": "noto-sans",
+      "fontHeading": "eb-garamond",
       "item": "Item",
       "rtl": false,
       "menuAccent": "subtle",
@@ -237,15 +237,15 @@
     {
       "name": "base-sera",
       "title": "Sera (Base)",
-      "description": "Sera / Lucide / Inter + Playfair Display",
+      "description": "Sera / Lucide / Noto Sans + EB Garamond",
       "base": "base",
       "style": "sera",
-      "baseColor": "neutral",
-      "theme": "neutral",
-      "chartColor": "neutral",
+      "baseColor": "taupe",
+      "theme": "taupe",
+      "chartColor": "taupe",
       "iconLibrary": "lucide",
-      "font": "inter",
-      "fontHeading": "playfair-display",
+      "font": "noto-sans",
+      "fontHeading": "eb-garamond",
       "item": "Item",
       "rtl": false,
       "menuAccent": "subtle",
diff --git a/apps/v4/public/r/styles/base-luma/demo.json b/apps/v4/public/r/styles/base-luma/demo.json
index bcac2d98e0..3611ef67c1 100644
--- a/apps/v4/public/r/styles/base-luma/demo.json
+++ b/apps/v4/public/r/styles/base-luma/demo.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/base-luma/examples/demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-luma/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-luma/ui/badge\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-luma/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-luma/ui/card\"\nimport { Checkbox } from \"@/registry/base-luma/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-luma/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-luma/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-luma/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-luma/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-luma/ui/radio-group\"\nimport { Slider } from \"@/registry/base-luma/ui/slider\"\nimport { Switch } from \"@/registry/base-luma/ui/switch\"\nimport { Textarea } from \"@/registry/base-luma/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-luma/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-luma/ui/badge\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-luma/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-luma/ui/card\"\nimport { Checkbox } from \"@/registry/base-luma/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-luma/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-luma/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-luma/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-luma/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-luma/ui/radio-group\"\nimport { Slider } from \"@/registry/base-luma/ui/slider\"\nimport { Switch } from \"@/registry/base-luma/ui/switch\"\nimport { Textarea } from \"@/registry/base-luma/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-luma/example.json b/apps/v4/public/r/styles/base-luma/example.json
index bb66bd2610..09ed8917a8 100644
--- a/apps/v4/public/r/styles/base-luma/example.json
+++ b/apps/v4/public/r/styles/base-luma/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/base-luma/components/example.tsx",
-      "content": "import { cn } from \"@/registry/base-luma/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/base-luma/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground style-lyra:rounded-none style-sera:rounded-none *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-luma/field.json b/apps/v4/public/r/styles/base-luma/field.json
index 59c8b1a021..82a3cf3dff 100644
--- a/apps/v4/public/r/styles/base-luma/field.json
+++ b/apps/v4/public/r/styles/base-luma/field.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/base-luma/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-luma/lib/utils\"\nimport { Label } from \"@/registry/base-luma/ui/label\"\nimport { Separator } from \"@/registry/base-luma/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:bg-input/30 has-[>[data-slot=field]]:rounded-2xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-luma/lib/utils\"\nimport { Label } from \"@/registry/base-luma/ui/label\"\nimport { Separator } from \"@/registry/base-luma/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:bg-input/30 has-[>[data-slot=field]]:rounded-2xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-luma/font-eb-garamond.json b/apps/v4/public/r/styles/base-luma/font-eb-garamond.json
new file mode 100644
index 0000000000..e3de403ba0
--- /dev/null
+++ b/apps/v4/public/r/styles/base-luma/font-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-eb-garamond",
+  "title": "EB Garamond",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-luma/font-heading-eb-garamond.json b/apps/v4/public/r/styles/base-luma/font-heading-eb-garamond.json
new file mode 100644
index 0000000000..2f7d94b7e5
--- /dev/null
+++ b/apps/v4/public/r/styles/base-luma/font-heading-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-eb-garamond",
+  "title": "EB Garamond (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-luma/registry.json b/apps/v4/public/r/styles/base-luma/registry.json
index 713f212773..a6a4f0fd6e 100644
--- a/apps/v4/public/r/styles/base-luma/registry.json
+++ b/apps/v4/public/r/styles/base-luma/registry.json
@@ -3185,6 +3185,19 @@
         "dependency": "@fontsource-variable/playfair-display"
       }
     },
+    {
+      "name": "font-eb-garamond",
+      "title": "EB Garamond",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
+    },
     {
       "name": "font-heading-geist",
       "title": "Geist (Heading)",
@@ -3496,6 +3509,19 @@
         "subsets": ["latin"],
         "dependency": "@fontsource-variable/playfair-display"
       }
+    },
+    {
+      "name": "font-heading-eb-garamond",
+      "title": "EB Garamond (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
     }
   ]
 }
diff --git a/apps/v4/public/r/styles/base-lyra/demo.json b/apps/v4/public/r/styles/base-lyra/demo.json
index 73d00cf90b..0c7c76c01f 100644
--- a/apps/v4/public/r/styles/base-lyra/demo.json
+++ b/apps/v4/public/r/styles/base-lyra/demo.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-lyra/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-lyra/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-lyra/ui/radio-group\"\nimport { Slider } from \"@/registry/base-lyra/ui/slider\"\nimport { Switch } from \"@/registry/base-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-lyra/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-lyra/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-lyra/ui/radio-group\"\nimport { Slider } from \"@/registry/base-lyra/ui/slider\"\nimport { Switch } from \"@/registry/base-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/example.json b/apps/v4/public/r/styles/base-lyra/example.json
index 82b9af35b0..1d4cc6330e 100644
--- a/apps/v4/public/r/styles/base-lyra/example.json
+++ b/apps/v4/public/r/styles/base-lyra/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/base-lyra/components/example.tsx",
-      "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground style-lyra:rounded-none style-sera:rounded-none *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/field.json b/apps/v4/public/r/styles/base-lyra/field.json
index 9e540adbd9..24b524ebac 100644
--- a/apps/v4/public/r/styles/base-lyra/field.json
+++ b/apps/v4/public/r/styles/base-lyra/field.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-2.5 font-medium data-[variant=label]:text-xs data-[variant=legend]:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-2 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-2 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-xs/relaxed leading-snug group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-xs/relaxed leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-xs group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-xs font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-2.5 font-medium data-[variant=label]:text-xs data-[variant=legend]:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-2 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-2 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-xs/relaxed group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-xs/relaxed leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-xs group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-xs font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/font-eb-garamond.json b/apps/v4/public/r/styles/base-lyra/font-eb-garamond.json
new file mode 100644
index 0000000000..e3de403ba0
--- /dev/null
+++ b/apps/v4/public/r/styles/base-lyra/font-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-eb-garamond",
+  "title": "EB Garamond",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/font-heading-eb-garamond.json b/apps/v4/public/r/styles/base-lyra/font-heading-eb-garamond.json
new file mode 100644
index 0000000000..2f7d94b7e5
--- /dev/null
+++ b/apps/v4/public/r/styles/base-lyra/font-heading-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-eb-garamond",
+  "title": "EB Garamond (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/registry.json b/apps/v4/public/r/styles/base-lyra/registry.json
index c6357e3827..bb1d0d2075 100644
--- a/apps/v4/public/r/styles/base-lyra/registry.json
+++ b/apps/v4/public/r/styles/base-lyra/registry.json
@@ -3185,6 +3185,19 @@
         "dependency": "@fontsource-variable/playfair-display"
       }
     },
+    {
+      "name": "font-eb-garamond",
+      "title": "EB Garamond",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
+    },
     {
       "name": "font-heading-geist",
       "title": "Geist (Heading)",
@@ -3496,6 +3509,19 @@
         "subsets": ["latin"],
         "dependency": "@fontsource-variable/playfair-display"
       }
+    },
+    {
+      "name": "font-heading-eb-garamond",
+      "title": "EB Garamond (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
     }
   ]
 }
diff --git a/apps/v4/public/r/styles/base-maia/demo.json b/apps/v4/public/r/styles/base-maia/demo.json
index dbfb9c6f4b..0cde1cbe67 100644
--- a/apps/v4/public/r/styles/base-maia/demo.json
+++ b/apps/v4/public/r/styles/base-maia/demo.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-maia/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-maia/ui/badge\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-maia/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport { Checkbox } from \"@/registry/base-maia/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-maia/ui/radio-group\"\nimport { Slider } from \"@/registry/base-maia/ui/slider\"\nimport { Switch } from \"@/registry/base-maia/ui/switch\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-maia/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-maia/ui/badge\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-maia/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport { Checkbox } from \"@/registry/base-maia/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-maia/ui/radio-group\"\nimport { Slider } from \"@/registry/base-maia/ui/slider\"\nimport { Switch } from \"@/registry/base-maia/ui/switch\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/example.json b/apps/v4/public/r/styles/base-maia/example.json
index b931f5494c..c528872306 100644
--- a/apps/v4/public/r/styles/base-maia/example.json
+++ b/apps/v4/public/r/styles/base-maia/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/base-maia/components/example.tsx",
-      "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground style-lyra:rounded-none style-sera:rounded-none *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/field.json b/apps/v4/public/r/styles/base-maia/field.json
index 66cd202c21..c27093338a 100644
--- a/apps/v4/public/r/styles/base-maia/field.json
+++ b/apps/v4/public/r/styles/base-maia/field.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/font-eb-garamond.json b/apps/v4/public/r/styles/base-maia/font-eb-garamond.json
new file mode 100644
index 0000000000..e3de403ba0
--- /dev/null
+++ b/apps/v4/public/r/styles/base-maia/font-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-eb-garamond",
+  "title": "EB Garamond",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/font-heading-eb-garamond.json b/apps/v4/public/r/styles/base-maia/font-heading-eb-garamond.json
new file mode 100644
index 0000000000..2f7d94b7e5
--- /dev/null
+++ b/apps/v4/public/r/styles/base-maia/font-heading-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-eb-garamond",
+  "title": "EB Garamond (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/registry.json b/apps/v4/public/r/styles/base-maia/registry.json
index 99c6bd7712..0be853c05f 100644
--- a/apps/v4/public/r/styles/base-maia/registry.json
+++ b/apps/v4/public/r/styles/base-maia/registry.json
@@ -3185,6 +3185,19 @@
         "dependency": "@fontsource-variable/playfair-display"
       }
     },
+    {
+      "name": "font-eb-garamond",
+      "title": "EB Garamond",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
+    },
     {
       "name": "font-heading-geist",
       "title": "Geist (Heading)",
@@ -3496,6 +3509,19 @@
         "subsets": ["latin"],
         "dependency": "@fontsource-variable/playfair-display"
       }
+    },
+    {
+      "name": "font-heading-eb-garamond",
+      "title": "EB Garamond (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
     }
   ]
 }
diff --git a/apps/v4/public/r/styles/base-mira/demo.json b/apps/v4/public/r/styles/base-mira/demo.json
index 54e078ae4f..942cd47d74 100644
--- a/apps/v4/public/r/styles/base-mira/demo.json
+++ b/apps/v4/public/r/styles/base-mira/demo.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-mira/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-mira/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport { Checkbox } from \"@/registry/base-mira/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-mira/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-mira/ui/radio-group\"\nimport { Slider } from \"@/registry/base-mira/ui/slider\"\nimport { Switch } from \"@/registry/base-mira/ui/switch\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-mira/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-mira/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport { Checkbox } from \"@/registry/base-mira/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-mira/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-mira/ui/radio-group\"\nimport { Slider } from \"@/registry/base-mira/ui/slider\"\nimport { Switch } from \"@/registry/base-mira/ui/switch\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/example.json b/apps/v4/public/r/styles/base-mira/example.json
index afb2faf9b1..c8b95da124 100644
--- a/apps/v4/public/r/styles/base-mira/example.json
+++ b/apps/v4/public/r/styles/base-mira/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/base-mira/components/example.tsx",
-      "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground style-lyra:rounded-none style-sera:rounded-none *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/field.json b/apps/v4/public/r/styles/base-mira/field.json
index 8f4c840049..d2b777281b 100644
--- a/apps/v4/public/r/styles/base-mira/field.json
+++ b/apps/v4/public/r/styles/base-mira/field.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-2 font-medium data-[variant=label]:text-xs/relaxed data-[variant=legend]:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-4 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-2 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-2 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-xs/relaxed leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-xs/relaxed leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-xs/relaxed group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-xs/relaxed font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-2 font-medium data-[variant=label]:text-xs/relaxed data-[variant=legend]:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-4 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-2 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-2 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-xs/relaxed font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-xs/relaxed leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-xs/relaxed group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-xs/relaxed font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/font-eb-garamond.json b/apps/v4/public/r/styles/base-mira/font-eb-garamond.json
new file mode 100644
index 0000000000..e3de403ba0
--- /dev/null
+++ b/apps/v4/public/r/styles/base-mira/font-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-eb-garamond",
+  "title": "EB Garamond",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/font-heading-eb-garamond.json b/apps/v4/public/r/styles/base-mira/font-heading-eb-garamond.json
new file mode 100644
index 0000000000..2f7d94b7e5
--- /dev/null
+++ b/apps/v4/public/r/styles/base-mira/font-heading-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-eb-garamond",
+  "title": "EB Garamond (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/registry.json b/apps/v4/public/r/styles/base-mira/registry.json
index 6766cd7b5e..d85ebbf0e7 100644
--- a/apps/v4/public/r/styles/base-mira/registry.json
+++ b/apps/v4/public/r/styles/base-mira/registry.json
@@ -3185,6 +3185,19 @@
         "dependency": "@fontsource-variable/playfair-display"
       }
     },
+    {
+      "name": "font-eb-garamond",
+      "title": "EB Garamond",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
+    },
     {
       "name": "font-heading-geist",
       "title": "Geist (Heading)",
@@ -3496,6 +3509,19 @@
         "subsets": ["latin"],
         "dependency": "@fontsource-variable/playfair-display"
       }
+    },
+    {
+      "name": "font-heading-eb-garamond",
+      "title": "EB Garamond (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
     }
   ]
 }
diff --git a/apps/v4/public/r/styles/base-nova/demo.json b/apps/v4/public/r/styles/base-nova/demo.json
index e4bad3dcd8..eaee2d0b0b 100644
--- a/apps/v4/public/r/styles/base-nova/demo.json
+++ b/apps/v4/public/r/styles/base-nova/demo.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-nova/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-nova/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport { Checkbox } from \"@/registry/base-nova/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-nova/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-nova/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-nova/ui/radio-group\"\nimport { Slider } from \"@/registry/base-nova/ui/slider\"\nimport { Switch } from \"@/registry/base-nova/ui/switch\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-nova/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-nova/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport { Checkbox } from \"@/registry/base-nova/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-nova/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-nova/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-nova/ui/radio-group\"\nimport { Slider } from \"@/registry/base-nova/ui/slider\"\nimport { Switch } from \"@/registry/base-nova/ui/switch\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/example.json b/apps/v4/public/r/styles/base-nova/example.json
index cc9fa80776..f8ab47e638 100644
--- a/apps/v4/public/r/styles/base-nova/example.json
+++ b/apps/v4/public/r/styles/base-nova/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/base-nova/components/example.tsx",
-      "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground style-lyra:rounded-none style-sera:rounded-none *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/field.json b/apps/v4/public/r/styles/base-nova/field.json
index 32e773fbbe..1e3155f00b 100644
--- a/apps/v4/public/r/styles/base-nova/field.json
+++ b/apps/v4/public/r/styles/base-nova/field.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-2 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-2 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/font-eb-garamond.json b/apps/v4/public/r/styles/base-nova/font-eb-garamond.json
new file mode 100644
index 0000000000..e3de403ba0
--- /dev/null
+++ b/apps/v4/public/r/styles/base-nova/font-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-eb-garamond",
+  "title": "EB Garamond",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/font-heading-eb-garamond.json b/apps/v4/public/r/styles/base-nova/font-heading-eb-garamond.json
new file mode 100644
index 0000000000..2f7d94b7e5
--- /dev/null
+++ b/apps/v4/public/r/styles/base-nova/font-heading-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-eb-garamond",
+  "title": "EB Garamond (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/registry.json b/apps/v4/public/r/styles/base-nova/registry.json
index 983c0b99df..0c84f8d2e3 100644
--- a/apps/v4/public/r/styles/base-nova/registry.json
+++ b/apps/v4/public/r/styles/base-nova/registry.json
@@ -3185,6 +3185,19 @@
         "dependency": "@fontsource-variable/playfair-display"
       }
     },
+    {
+      "name": "font-eb-garamond",
+      "title": "EB Garamond",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
+    },
     {
       "name": "font-heading-geist",
       "title": "Geist (Heading)",
@@ -3496,6 +3509,19 @@
         "subsets": ["latin"],
         "dependency": "@fontsource-variable/playfair-display"
       }
+    },
+    {
+      "name": "font-heading-eb-garamond",
+      "title": "EB Garamond (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
     }
   ]
 }
diff --git a/apps/v4/public/r/styles/base-sera/accordion-example.json b/apps/v4/public/r/styles/base-sera/accordion-example.json
new file mode 100644
index 0000000000..26b6947978
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/accordion-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion-example",
+  "title": "Accordion",
+  "registryDependencies": [
+    "accordion",
+    "button",
+    "card",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/accordion-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/base-sera/ui/accordion\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-sera/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion multiple className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion className=\"mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border\"\n          >\n            <AccordionTrigger className=\"font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0 style-luma:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            multiple\n            defaultValue={[\"plans\"]}\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion className=\"mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg style-luma:rounded-xl\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"p-1 data-open:bg-muted/50\"\n          >\n            <AccordionTrigger className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/accordion.json b/apps/v4/public/r/styles/base-sera/accordion.json
new file mode 100644
index 0000000000..8d4615b611
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/accordion.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/accordion.tsx",
+      "content": "import { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 rounded-none border border-transparent py-4 text-left text-sm font-semibold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          remixicon=\"RiArrowUpSLine\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/accordion",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/accordion-example.tsx",
+      "api": "https://base-ui.com/react/components/accordion.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/alert-dialog-example.json b/apps/v4/public/r/styles/base-sera/alert-dialog-example.json
new file mode 100644
index 0000000000..2c86049507
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/alert-dialog-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-dialog-example",
+  "title": "Alert Dialog",
+  "registryDependencies": [
+    "alert-dialog",
+    "button",
+    "dialog",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/alert-dialog-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-sera/ui/alert-dialog\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-sera/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n  return (\n    <ExampleWrapper>\n      <AlertDialogBasic />\n      <AlertDialogSmall />\n      <AlertDialogWithMedia />\n      <AlertDialogSmallWithMedia />\n      <AlertDialogDestructive />\n      <AlertDialogInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertDialogBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Default</Button>}\n        />\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmall() {\n  return (\n    <Example title=\"Small\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button variant=\"outline\">Small</Button>} />\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogWithMedia() {\n  return (\n    <Example title=\"With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Default (Media)</Button>}\n        />\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n                remixicon=\"RiBluetoothLine\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete your account and remove your data\n              from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmallWithMedia() {\n  return (\n    <Example title=\"Small With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Small (Media)</Button>}\n        />\n\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n                remixicon=\"RiBluetoothLine\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogDestructive() {\n  return (\n    <Example title=\"Destructive\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"destructive\">Delete Chat</Button>}\n        />\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n              <IconPlaceholder\n                lucide=\"Trash2Icon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"Delete02Icon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete this chat conversation. View{\" \"}\n              <a href=\"#\">Settings</a> delete any memories saved during this\n              chat.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel variant=\"ghost\">Cancel</AlertDialogCancel>\n            <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogInDialog() {\n  return (\n    <Example title=\"In Dialog\" className=\"items-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Alert Dialog Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to open an alert dialog.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Open Alert Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/alert-dialog.json b/apps/v4/public/r/styles/base-sera/alert-dialog.json
new file mode 100644
index 0000000000..5830ca6f1f
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/alert-dialog.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-dialog",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/ui/alert-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\n\nfunction AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: AlertDialogPrimitive.Backdrop.Props) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/20 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Popup.Props & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Popup\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-none bg-popover p-6 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-2 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"mb-2 inline-flex size-16 items-center justify-center rounded-none bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"cn-font-heading text-lg tracking-wider uppercase sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"mt-0.5 text-sm leading-relaxed text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  return (\n    <Button\n      data-slot=\"alert-dialog-action\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Close.Props &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <AlertDialogPrimitive.Close\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(className)}\n      render={<Button variant={variant} size={size} />}\n      {...props}\n    />\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/alert-dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-dialog-example.tsx",
+      "api": "https://base-ui.com/react/components/alert-dialog.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/alert-example.json b/apps/v4/public/r/styles/base-sera/alert-example.json
new file mode 100644
index 0000000000..63fd8b66a2
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/alert-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-example",
+  "title": "Alert",
+  "registryDependencies": [
+    "alert",
+    "badge",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/alert-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/base-sera/ui/alert\"\nimport { Badge } from \"@/registry/base-sera/ui/badge\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/alert.json b/apps/v4/public/r/styles/base-sera/alert.json
new file mode 100644
index 0000000000..6cd170b68b
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/alert.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/alert.tsx",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nconst alertVariants = cva(\n  \"group/alert relative grid w-full gap-1 border bg-background px-4 py-3 text-left text-sm after:absolute after:-inset-y-px after:-left-px after:w-0.5 has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground after:bg-foreground\",\n        destructive:\n          \"bg-card text-destructive after:bg-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"cn-font-heading font-sans font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2.5 right-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/alert",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/aspect-ratio-example.json b/apps/v4/public/r/styles/base-sera/aspect-ratio-example.json
new file mode 100644
index 0000000000..aca47b3bc1
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/aspect-ratio-example.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "aspect-ratio-example",
+  "title": "Aspect Ratio",
+  "registryDependencies": [
+    "aspect-ratio",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/aspect-ratio-example.tsx",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { AspectRatio } from \"@/registry/base-sera/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={16 / 9}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio\n        ratio={1 / 1}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={9 / 16}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={21 / 9}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/aspect-ratio.json b/apps/v4/public/r/styles/base-sera/aspect-ratio.json
new file mode 100644
index 0000000000..53d7c919b3
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/aspect-ratio.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "aspect-ratio",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/aspect-ratio.tsx",
+      "content": "import { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction AspectRatio({\n  ratio,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & { ratio: number }) {\n  return (\n    <div\n      data-slot=\"aspect-ratio\"\n      style={\n        {\n          \"--ratio\": ratio,\n        } as React.CSSProperties\n      }\n      className={cn(\"relative aspect-(--ratio)\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { AspectRatio }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/aspect-ratio",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/aspect-ratio-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/avatar-example.json b/apps/v4/public/r/styles/base-sera/avatar-example.json
new file mode 100644
index 0000000000..31e961f2e5
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/avatar-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "avatar-example",
+  "title": "Avatar",
+  "registryDependencies": [
+    "avatar",
+    "button",
+    "empty",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/avatar-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/base-sera/ui/avatar\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/base-sera/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n  return (\n    <ExampleWrapper>\n      <AvatarSizes />\n      <AvatarWithBadge />\n      <AvatarWithBadgeIcon />\n      <AvatarGroupExample />\n      <AvatarGroupWithCount />\n      <AvatarGroupWithIconCount />\n      <AvatarInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction AvatarSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadge() {\n  return (\n    <Example title=\"Badge\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadgeIcon() {\n  return (\n    <Example title=\"Badge with Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n              remixicon=\"RiCheckLine\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n              remixicon=\"RiCheckLine\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n              remixicon=\"RiCheckLine\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarGroupExample() {\n  return (\n    <Example title=\"Group\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithCount() {\n  return (\n    <Example title=\"Group with Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithIconCount() {\n  return (\n    <Example title=\"Group with Icon Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n            remixicon=\"RiAddLine\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n            remixicon=\"RiAddLine\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/shadcn.png\"\n            alt=\"@shadcn\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n            remixicon=\"RiAddLine\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarInEmpty() {\n  return (\n    <Example title=\"In Empty\">\n      <Empty className=\"w-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n              <AvatarGroupCount>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </AvatarGroupCount>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            Invite Members\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/avatar.json b/apps/v4/public/r/styles/base-sera/avatar.json
new file mode 100644
index 0000000000..2f5dd05143
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/avatar.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "avatar",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/avatar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: AvatarPrimitive.Root.Props & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: AvatarPrimitive.Fallback.Props) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/avatar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/avatar-example.tsx",
+      "api": "https://base-ui.com/react/components/avatar.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/badge-example.json b/apps/v4/public/r/styles/base-sera/badge-example.json
new file mode 100644
index 0000000000..cb306ca725
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/badge-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-example",
+  "title": "Badge",
+  "registryDependencies": [
+    "badge",
+    "spinner",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/badge-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Badge } from \"@/registry/base-sera/ui/badge\"\nimport { Spinner } from \"@/registry/base-sera/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <BadgeVariants />\n      <BadgeWithIconLeft />\n      <BadgeWithIconRight />\n      <BadgeWithSpinner />\n      <BadgeAsLink />\n      <BadgeLongText />\n      <BadgeCustomColors />\n    </ExampleWrapper>\n  )\n}\n\nfunction BadgeVariants() {\n  return (\n    <Example title=\"Variants\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>Default</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n        <Badge variant=\"ghost\">Ghost</Badge>\n        <Badge variant=\"link\">Link</Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconLeft() {\n  return (\n    <Example title=\"Icon Left\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n            data-icon=\"inline-start\"\n          />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n            data-icon=\"inline-start\"\n          />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n            data-icon=\"inline-start\"\n          />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n            data-icon=\"inline-start\"\n          />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n            data-icon=\"inline-start\"\n          />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n            data-icon=\"inline-start\"\n          />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconRight() {\n  return (\n    <Example title=\"Icon Right\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"secondary\">\n          Secondary\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"destructive\">\n          Destructive\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"outline\">\n          Outline\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"ghost\">\n          Ghost\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"link\">\n          Link\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithSpinner() {\n  return (\n    <Example title=\"With Spinner\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <Spinner data-icon=\"inline-start\" />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeAsLink() {\n  return (\n    <Example title=\"asChild\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                phosphor=\"ArrowUpRightIcon\"\n                remixicon=\"RiArrowRightUpLine\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"secondary\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                phosphor=\"ArrowUpRightIcon\"\n                remixicon=\"RiArrowRightUpLine\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"destructive\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                phosphor=\"ArrowUpRightIcon\"\n                remixicon=\"RiArrowRightUpLine\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"ghost\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowRight02Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n                remixicon=\"RiArrowRightUpLine\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeLongText() {\n  return (\n    <Example title=\"Long Text\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge variant=\"secondary\">\n          A badge with a lot of text to see how it wraps\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeCustomColors() {\n  return (\n    <Example title=\"Custom Colors\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n          Red\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/badge.json b/apps/v4/public/r/styles/base-sera/badge.json
new file mode 100644
index 0000000000..7ef8adc8e5
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/badge.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/badge.tsx",
+      "content": "import { 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-sera/lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-none border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ variant }), className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/badge",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/badge-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/breadcrumb-example.json b/apps/v4/public/r/styles/base-sera/breadcrumb-example.json
new file mode 100644
index 0000000000..db5dc8d9f1
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/breadcrumb-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-example",
+  "title": "Breadcrumb",
+  "registryDependencies": [
+    "breadcrumb",
+    "dropdown-menu",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/breadcrumb-example.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-sera/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\n\nexport default function BreadcrumbExample() {\n  return (\n    <ExampleWrapper>\n      <BreadcrumbBasic />\n      <BreadcrumbWithDropdown />\n      <BreadcrumbWithLink />\n    </ExampleWrapper>\n  )\n}\n\nfunction BreadcrumbBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center justify-center\">\n      <Breadcrumb>\n        <BreadcrumbList>\n          <BreadcrumbItem>\n            <BreadcrumbLink href=\"#\">Home</BreadcrumbLink>\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n          </BreadcrumbItem>\n        </BreadcrumbList>\n      </Breadcrumb>\n    </Example>\n  )\n}\n\nfunction BreadcrumbWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\" className=\"items-center justify-center\">\n      <Breadcrumb>\n        <BreadcrumbList>\n          <BreadcrumbItem>\n            <BreadcrumbLink href=\"#\">Home</BreadcrumbLink>\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button size=\"icon-sm\" variant=\"ghost\" />}\n              >\n                <BreadcrumbEllipsis />\n                <span className=\"sr-only\">Toggle menu</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"start\">\n                <DropdownMenuItem>Documentation</DropdownMenuItem>\n                <DropdownMenuItem>Themes</DropdownMenuItem>\n                <DropdownMenuItem>GitHub</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n          </BreadcrumbItem>\n        </BreadcrumbList>\n      </Breadcrumb>\n    </Example>\n  )\n}\n\nfunction BreadcrumbWithLink() {\n  return (\n    <Example title=\"With Link\" className=\"items-center justify-center\">\n      <Breadcrumb>\n        <BreadcrumbList>\n          <BreadcrumbItem>\n            <BreadcrumbLink render={<Link href=\"#\">Home</Link>} />\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <BreadcrumbEllipsis />\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <BreadcrumbLink render={<Link href=\"#\">Components</Link>} />\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n          </BreadcrumbItem>\n        </BreadcrumbList>\n      </Breadcrumb>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/breadcrumb.json b/apps/v4/public/r/styles/base-sera/breadcrumb.json
new file mode 100644
index 0000000000..187d48a499
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/breadcrumb.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/breadcrumb.tsx",
+      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\"transition-colors hover:text-foreground\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"font-normal text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-5 items-center justify-center [&>svg]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n        remixicon=\"RiMoreLine\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/breadcrumb",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/breadcrumb-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/button-example.json b/apps/v4/public/r/styles/base-sera/button-example.json
new file mode 100644
index 0000000000..4c55bf9652
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/button-example.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-example",
+  "title": "Button",
+  "registryDependencies": [
+    "button",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/button-example.tsx",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button, buttonVariants } from \"@/registry/base-sera/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <a href=\"#\" className={buttonVariants()}>\n          Link\n        </a>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/button-group-example.json b/apps/v4/public/r/styles/base-sera/button-group-example.json
new file mode 100644
index 0000000000..6ca84f6e7d
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/button-group-example.json
@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-group-example",
+  "title": "Button Group",
+  "registryDependencies": [
+    "button",
+    "button-group",
+    "dropdown-menu",
+    "field",
+    "input",
+    "input-group",
+    "label",
+    "popover",
+    "select",
+    "tooltip",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/button-group-example.tsx",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/base-sera/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-sera/ui/input-group\"\nimport { Label } from \"@/registry/base-sera/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-sera/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-sera/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 render={<Label htmlFor=\"input-text\" />}>\n            GPU Size\n          </ButtonGroupText>\n          <Input\n            id=\"input-text\"\n            placeholder=\"Type something here...\"\n            className=\"style-luma:border-border\"\n          />\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\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n              />\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\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeX\"\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\nconst currencyItems = [\n  { label: \"$\", value: \"$\" },\n  { label: \"€\", value: \"€\" },\n  { label: \"£\", value: \"£\" },\n]\n\nfunction ButtonGroupWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select items={currencyItems} defaultValue={currencyItems[0]}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {currencyItems.map((item) => (\n                  <SelectItem key={item.value} value={item}>\n                    {item.label}\n                  </SelectItem>\n                ))}\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\n          variant=\"outline\"\n          size=\"icon\"\n          className=\"w-12\"\n          render={<span />}\n          nativeButton={false}\n        >\n          1.2K\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nconst durationItems = [\n  { label: \"Hours\", value: \"hours\" },\n  { label: \"Days\", value: \"days\" },\n  { label: \"Weeks\", value: \"weeks\" },\n]\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select items={durationItems} defaultValue={durationItems[0]}>\n          <SelectTrigger id=\"duration\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectGroup>\n              {durationItems.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\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 render={<InputGroupAddon align=\"inline-end\" />}>\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconHeadphones\"\n                  hugeicons=\"AudioWave01Icon\"\n                  phosphor=\"MicrophoneIcon\"\n                  remixicon=\"RiMicLine\"\n                />\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=\"ArrowLeft02Icon\"\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=\"ArrowRight02Icon\"\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"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/button-group.json b/apps/v4/public/r/styles/base-sera/button-group.json
new file mode 100644
index 0000000000..dfe43e95b0
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/button-group.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-group",
+  "registryDependencies": [
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/ui/button-group.tsx",
+      "content": "import { 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-sera/lib/utils\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 *:data-[slot=input]:px-4 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-border has-[>[data-variant=outline]]:*:data-[slot=input-group]:px-2.5 has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-border has-[>[data-variant=outline]]:*:[[role=combobox]]:px-2.5 has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-ring has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-ring has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:[&>input]:border-border has-[>[data-variant=outline]]:[&>input:focus-visible]:border-ring\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0\",\n        vertical:\n          \"flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"flex items-center gap-2 border border-transparent border-b-input bg-transparent px-2.5 text-xs font-semibold uppercase group-has-[>[data-variant=outline]]/button-group:border-border [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"button-group-text\",\n    },\n  })\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/button-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-group-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/button.json b/apps/v4/public/r/styles/base-sera/button.json
new file mode 100644
index 0000000000..82d3f27695
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/button.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/button.tsx",
+      "content": "import { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-transparent hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-input/30\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-10 gap-1.5 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4\",\n        xs: \"h-7 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-9 gap-1 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        lg: \"h-11 gap-1.5 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5\",\n        icon: \"size-10\",\n        \"icon-xs\": \"size-7 [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-9\",\n        \"icon-lg\": \"size-11\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/button",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/calendar-example.json b/apps/v4/public/r/styles/base-sera/calendar-example.json
new file mode 100644
index 0000000000..da4acbea7f
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/calendar-example.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-example",
+  "title": "Calendar",
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "card",
+    "field",
+    "input",
+    "label",
+    "popover",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/calendar-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/base-sera/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-sera/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-sera/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-sera/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-sera/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n      <CalendarInCard />\n      <CalendarInPopover />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"single\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarInPopover() {\n  return (\n    <Example title=\"In Popover\">\n      <Popover>\n        <PopoverTrigger\n          render={<Button variant=\"outline\" className=\"px-2.5 font-normal\" />}\n        >\n          <IconPlaceholder\n            lucide=\"CalendarIcon\"\n            tabler=\"IconCalendar\"\n            hugeicons=\"CalendarIcon\"\n            phosphor=\"CalendarBlankIcon\"\n            remixicon=\"RiCalendarLine\"\n            data-icon=\"inline-start\"\n          />\n          Open Calendar\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar mode=\"single\" />\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"border-t bg-card\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-simple\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-range\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-with-dropdowns-desktop\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-start\"\n              className=\"ml-auto\"\n            />\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/calendar.json b/apps/v4/public/r/styles/base-sera/calendar.json
new file mode 100644
index 0000000000..9a99aa99c3
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/calendar.json
@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar",
+  "dependencies": [
+    "react-day-picker@latest",
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/ui/calendar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/base-sera/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"group/calendar bg-background p-3 [--cell-radius:0] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"cn-calendar-dropdown-root relative rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute inset-0 bg-popover opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"font-medium select-none\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-(--cell-size) select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] text-muted-foreground select-none\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                remixicon=\"RiArrowLeftSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/calendar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/calendar-example.tsx",
+      "api": "https://react-day-picker.js.org"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/card-example.json b/apps/v4/public/r/styles/base-sera/card-example.json
new file mode 100644
index 0000000000..2371d39adf
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/card-example.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card-example",
+  "title": "Card",
+  "registryDependencies": [
+    "avatar",
+    "button",
+    "card",
+    "field",
+    "input",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/card-example.tsx",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/base-sera/ui/avatar\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-sera/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                remixicon=\"RiTextWrap\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/card.json b/apps/v4/public/r/styles/base-sera/card.json
new file mode 100644
index 0000000000..c93f83689d
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/card.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/card.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-8 overflow-hidden bg-card py-8 text-sm text-card-foreground shadow-sm ring-1 ring-foreground/5 has-[>img:first-child]:pt-0 data-[size=sm]:gap-5 data-[size=sm]:py-5 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1.5 rounded-none px-8 group-data-[size=sm]/card:px-5 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-8 group-data-[size=sm]/card:[.border-b]:pb-5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"cn-font-heading text-lg tracking-wider uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm leading-relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-8 group-data-[size=sm]/card:px-5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center px-8 group-data-[size=sm]/card:px-5 [.border-t]:pt-8 group-data-[size=sm]/card:[.border-t]:pt-5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/card-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/carousel-example.json b/apps/v4/public/r/styles/base-sera/carousel-example.json
new file mode 100644
index 0000000000..2469a6f10c
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/carousel-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-example",
+  "title": "Carousel",
+  "registryDependencies": [
+    "card",
+    "carousel",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/carousel-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Card, CardContent } from \"@/registry/base-sera/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/base-sera/ui/carousel\"\n\nexport default function CarouselExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <CarouselBasic />\n      <CarouselMultiple />\n      <CarouselWithGap />\n    </ExampleWrapper>\n  )\n}\n\nfunction CarouselBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Carousel className=\"mx-auto max-w-xs sm:max-w-sm\">\n        <CarouselContent>\n          {Array.from({ length: 5 }).map((_, index) => (\n            <CarouselItem key={index}>\n              <div className=\"p-1 style-luma:p-2.5\">\n                <Card>\n                  <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                    <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                  </CardContent>\n                </Card>\n              </div>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n        <CarouselPrevious className=\"hidden sm:inline-flex\" />\n        <CarouselNext className=\"hidden sm:inline-flex\" />\n      </Carousel>\n    </Example>\n  )\n}\n\nfunction CarouselMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Carousel\n        className=\"mx-auto max-w-xs sm:max-w-sm\"\n        opts={{\n          align: \"start\",\n        }}\n      >\n        <CarouselContent>\n          {Array.from({ length: 5 }).map((_, index) => (\n            <CarouselItem key={index} className=\"sm:basis-1/2 lg:basis-1/3\">\n              <div className=\"p-1 style-luma:p-2.5\">\n                <Card>\n                  <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                    <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                  </CardContent>\n                </Card>\n              </div>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n        <CarouselPrevious className=\"hidden sm:inline-flex\" />\n        <CarouselNext className=\"hidden sm:inline-flex\" />\n      </Carousel>\n    </Example>\n  )\n}\n\nfunction CarouselWithGap() {\n  return (\n    <Example title=\"With Gap\">\n      <Carousel className=\"mx-auto max-w-xs sm:max-w-sm\">\n        <CarouselContent className=\"-ml-1\">\n          {Array.from({ length: 5 }).map((_, index) => (\n            <CarouselItem key={index} className=\"pl-1 md:basis-1/2\">\n              <div className=\"p-1 style-luma:p-2.5\">\n                <Card>\n                  <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                    <span className=\"text-2xl font-semibold\">{index + 1}</span>\n                  </CardContent>\n                </Card>\n              </div>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n        <CarouselPrevious className=\"hidden sm:inline-flex\" />\n        <CarouselNext className=\"hidden sm:inline-flex\" />\n      </Carousel>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/carousel.json b/apps/v4/public/r/styles/base-sera/carousel.json
new file mode 100644
index 0000000000..4038c27b50
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/carousel.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel",
+  "dependencies": [
+    "embla-carousel-react"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/ui/carousel.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n        remixicon=\"RiArrowLeftSLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  useCarousel,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/carousel",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/carousel-example.tsx",
+      "api": "https://www.embla-carousel.com/get-started/react"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/chart-example.json b/apps/v4/public/r/styles/base-sera/chart-example.json
new file mode 100644
index 0000000000..6168a38ca4
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/chart-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-example",
+  "title": "Chart",
+  "registryDependencies": [
+    "chart",
+    "card",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/chart-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-sera/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-sera/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartPieExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={64}\n              outerRadius={94}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/chart.json b/apps/v4/public/r/styles/base-sera/chart.json
new file mode 100644
index 0000000000..90708fd1c8
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/chart.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart",
+  "dependencies": [
+    "recharts@3.8.0"
+  ],
+  "registryDependencies": [
+    "card"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/ui/chart.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n  string,\n  {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n>\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  initialDimension = INITIAL_DIMENSION,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n  initialDimension?: {\n    width: number\n    height: number\n  }\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer\n          initialDimension={initialDimension}\n        >\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme ?? config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  } & Omit<\n    RechartsPrimitive.DefaultTooltipContentProps<\n      TooltipValueType,\n      TooltipNameType\n    >,\n    \"accessibilityLayer\"\n  >) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? (config[label]?.label ?? label)\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-32 items-start gap-1.5 bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-sm ring-1 ring-foreground/10\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n            return (\n              <div\n                key={index}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label ?? item.name}\n                        </span>\n                      </div>\n                      {item.value != null && (\n                        <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                          {typeof item.value === \"number\"\n                            ? item.value.toLocaleString()\n                            : String(item.value)}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> & {\n  hideIcon?: boolean\n  nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item, index) => {\n          const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={index}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/chart",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/chart-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/checkbox-example.json b/apps/v4/public/r/styles/base-sera/checkbox-example.json
new file mode 100644
index 0000000000..15e4d9f393
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/checkbox-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-example",
+  "title": "Checkbox",
+  "registryDependencies": [
+    "checkbox",
+    "field",
+    "table",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/checkbox-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Checkbox } from \"@/registry/base-sera/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/base-sera/ui/field\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-sera/ui/table\"\n\nexport default function CheckboxExample() {\n  return (\n    <ExampleWrapper>\n      <CheckboxBasic />\n      <CheckboxWithDescription />\n      <CheckboxInvalid />\n      <CheckboxDisabled />\n      <CheckboxWithTitle />\n      <CheckboxInTable />\n      <CheckboxGroup />\n    </ExampleWrapper>\n  )\n}\n\nfunction CheckboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Checkbox id=\"terms\" />\n        <FieldLabel htmlFor=\"terms\">Accept terms and conditions</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CheckboxWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field orientation=\"horizontal\">\n        <Checkbox id=\"terms-2\" defaultChecked />\n        <FieldContent>\n          <FieldLabel htmlFor=\"terms-2\">Accept terms and conditions</FieldLabel>\n          <FieldDescription>\n            By clicking this checkbox, you agree to the terms and conditions.\n          </FieldDescription>\n        </FieldContent>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CheckboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Field orientation=\"horizontal\" data-invalid>\n        <Checkbox id=\"terms-3\" aria-invalid />\n        <FieldLabel htmlFor=\"terms-3\">Accept terms and conditions</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CheckboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field orientation=\"horizontal\">\n        <Checkbox id=\"toggle\" disabled />\n        <FieldLabel htmlFor=\"toggle\">Enable notifications</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CheckboxWithTitle() {\n  return (\n    <Example title=\"With Title\">\n      <FieldGroup>\n        <FieldLabel htmlFor=\"toggle-2\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"toggle-2\" defaultChecked />\n            <FieldContent>\n              <FieldTitle>Enable notifications</FieldTitle>\n              <FieldDescription>\n                You can enable or disable notifications at any time.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldLabel htmlFor=\"toggle-4\">\n          <Field orientation=\"horizontal\" data-disabled>\n            <Checkbox id=\"toggle-4\" disabled />\n            <FieldContent>\n              <FieldTitle>Enable notifications</FieldTitle>\n              <FieldDescription>\n                You can enable or disable notifications at any time.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nconst tableData = [\n  {\n    id: \"1\",\n    name: \"Sarah Chen\",\n    email: \"sarah.chen@example.com\",\n    role: \"Admin\",\n  },\n  {\n    id: \"2\",\n    name: \"Marcus Rodriguez\",\n    email: \"marcus.rodriguez@example.com\",\n    role: \"User\",\n  },\n  {\n    id: \"3\",\n    name: \"Priya Patel\",\n    email: \"priya.patel@example.com\",\n    role: \"User\",\n  },\n  {\n    id: \"4\",\n    name: \"David Kim\",\n    email: \"david.kim@example.com\",\n    role: \"Editor\",\n  },\n]\n\nfunction CheckboxInTable() {\n  const [selectedRows, setSelectedRows] = React.useState<Set<string>>(\n    new Set([\"1\"])\n  )\n\n  const selectAll = selectedRows.size === tableData.length\n\n  const handleSelectAll = (checked: boolean) => {\n    if (checked) {\n      setSelectedRows(new Set(tableData.map((row) => row.id)))\n    } else {\n      setSelectedRows(new Set())\n    }\n  }\n\n  const handleSelectRow = (id: string, checked: boolean) => {\n    const newSelected = new Set(selectedRows)\n    if (checked) {\n      newSelected.add(id)\n    } else {\n      newSelected.delete(id)\n    }\n    setSelectedRows(newSelected)\n  }\n\n  return (\n    <Example title=\"In Table\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-8\">\n              <Checkbox\n                id=\"select-all\"\n                checked={selectAll}\n                onCheckedChange={handleSelectAll}\n              />\n            </TableHead>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead>Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {tableData.map((row) => (\n            <TableRow\n              key={row.id}\n              data-state={selectedRows.has(row.id) ? \"selected\" : undefined}\n            >\n              <TableCell>\n                <Checkbox\n                  id={`row-${row.id}`}\n                  checked={selectedRows.has(row.id)}\n                  onCheckedChange={(checked) =>\n                    handleSelectRow(row.id, checked === true)\n                  }\n                />\n              </TableCell>\n              <TableCell className=\"font-medium\">{row.name}</TableCell>\n              <TableCell>{row.email}</TableCell>\n              <TableCell>{row.role}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction CheckboxGroup() {\n  return (\n    <Example title=\"Group\">\n      <Field>\n        <FieldLabel>Show these items on the desktop:</FieldLabel>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"finder-pref-9k2-hard-disks-ljj\" />\n          <FieldLabel\n            htmlFor=\"finder-pref-9k2-hard-disks-ljj\"\n            className=\"font-normal\"\n          >\n            Hard disks\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"finder-pref-9k2-external-disks-1yg\" />\n          <FieldLabel\n            htmlFor=\"finder-pref-9k2-external-disks-1yg\"\n            className=\"font-normal\"\n          >\n            External disks\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"finder-pref-9k2-cds-dvds-fzt\" />\n          <FieldLabel\n            htmlFor=\"finder-pref-9k2-cds-dvds-fzt\"\n            className=\"font-normal\"\n          >\n            CDs, DVDs, and iPods\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"finder-pref-9k2-connected-servers-6l2\" />\n          <FieldLabel\n            htmlFor=\"finder-pref-9k2-connected-servers-6l2\"\n            className=\"font-normal\"\n          >\n            Connected servers\n          </FieldLabel>\n        </Field>\n      </Field>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/checkbox.json b/apps/v4/public/r/styles/base-sera/checkbox.json
new file mode 100644
index 0000000000..1b9ba4b0f9
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/checkbox.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/checkbox.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer relative flex size-4.5 shrink-0 items-center justify-center rounded-none border border-input bg-transparent transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/checkbox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/checkbox-example.tsx",
+      "api": "https://base-ui.com/react/components/checkbox.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/collapsible-example.json b/apps/v4/public/r/styles/base-sera/collapsible-example.json
new file mode 100644
index 0000000000..e5a33bdf12
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/collapsible-example.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "collapsible-example",
+  "title": "Collapsible",
+  "registryDependencies": [
+    "button",
+    "card",
+    "collapsible",
+    "field",
+    "input",
+    "tabs",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/collapsible-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-sera/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-sera/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/base-sera/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"CaretRightIcon\"\n              remixicon=\"RiArrowRightSLine\"\n              className=\"transition-transform group-data-[state=open]:rotate-90\"\n            />\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n              remixicon=\"RiFolderLine\"\n            />\n            {fileItem.name}\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"mt-1 ml-5 style-lyra:ml-4\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"w-full justify-start gap-2 text-foreground\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              {isOpen ? (\n                <IconPlaceholder\n                  lucide=\"MinimizeIcon\"\n                  tabler=\"IconMinimize\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              ) : (\n                <IconPlaceholder\n                  lucide=\"MaximizeIcon\"\n                  tabler=\"IconMaximize\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              )}\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/collapsible.json b/apps/v4/public/r/styles/base-sera/collapsible.json
new file mode 100644
index 0000000000..f805028bbd
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/collapsible.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "collapsible",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/collapsible.tsx",
+      "content": "\"use client\"\n\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\"\n\nfunction Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />\n}\n\nfunction CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {\n  return (\n    <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" {...props} />\n  )\n}\n\nfunction CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {\n  return (\n    <CollapsiblePrimitive.Panel data-slot=\"collapsible-content\" {...props} />\n  )\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/collapsible",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/collapsible-example.tsx",
+      "api": "https://base-ui.com/react/components/collapsible.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/combobox-example.json b/apps/v4/public/r/styles/base-sera/combobox-example.json
new file mode 100644
index 0000000000..62f5018343
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/combobox-example.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-example",
+  "title": "Combobox",
+  "registryDependencies": [
+    "button",
+    "card",
+    "combobox",
+    "dialog",
+    "field",
+    "input",
+    "input-group",
+    "item",
+    "select",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/combobox-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-sera/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-sera/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-sera/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-sera/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-sera/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-sera/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxSides />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Combobox key={side} items={frameworks}>\n            <ComboboxInput\n              placeholder={side.replace(\"-\", \" \")}\n              className=\"w-32 **:data-[slot=input-group-control]:capitalize\"\n            />\n            <ComboboxContent side={side}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst items = [\n  {\n    label: \"Select a framework\",\n    value: null,\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Vue\",\n    value: \"vue\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Svelte\",\n    value: \"svelte\",\n  },\n  {\n    label: \"Solid\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n]\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select items={items}>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"w-52 justify-between font-normal text-muted-foreground\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/combobox.json b/apps/v4/public/r/styles/base-sera/combobox.json
new file mode 100644
index 0000000000..b1cff7c2cc
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/combobox.json
@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox",
+  "dependencies": [
+    "@base-ui/react"
+  ],
+  "registryDependencies": [
+    "button",
+    "input-group"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/ui/combobox.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-sera/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"pointer-events-none size-4 text-muted-foreground\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        remixicon=\"RiCloseLine\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            render={<ComboboxTrigger />}\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          />\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"cn-menu-target cn-menu-translucent group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1.5 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-transparent *:data-[slot=input-group]:bg-transparent *:data-[slot=input-group]:px-2.5 *:data-[slot=input-group]:focus-within:border-transparent data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1.5 overflow-y-auto overscroll-contain p-1.5 data-empty:p-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={\n          <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n        }\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\n        \"px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"-mx-1.5 my-1.5 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\n        \"flex min-h-10 flex-wrap items-center gap-1.5 rounded-none border border-transparent border-b-input bg-transparent bg-clip-padding px-0 py-1.5 text-sm transition-[color,border-color] focus-within:border-b-ring has-aria-invalid:border-b-destructive has-data-[slot=combobox-chip]:px-0 dark:has-aria-invalid:border-b-destructive/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-none bg-muted px-2 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            remixicon=\"RiCloseLine\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\"min-w-16 flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/combobox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/combobox-example.tsx",
+      "api": "https://base-ui.com/react/components/combobox.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/command-example.json b/apps/v4/public/r/styles/base-sera/command-example.json
new file mode 100644
index 0000000000..2e3b7e621d
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/command-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "command-example",
+  "title": "Command",
+  "registryDependencies": [
+    "button",
+    "command",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/command-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-sera/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-sera/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"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/command.json b/apps/v4/public/r/styles/base-sera/command.json
new file mode 100644
index 0000000000..03de305b3e
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/command.json
@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "command",
+  "dependencies": [
+    "cmdk"
+  ],
+  "registryDependencies": [
+    "dialog",
+    "input-group"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/ui/command.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-sera/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/base-sera/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex size-full flex-col overflow-hidden bg-popover text-popover-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, \"children\"> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n  children: React.ReactNode\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"top-1/3 translate-y-0 overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1\">\n      <InputGroup className=\"border-transparent border-b-input bg-transparent px-3\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full px-2 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden p-1.5 text-foreground **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-[0.625rem] **:[[cmdk-group-heading]]:font-semibold **:[[cmdk-group-heading]]:tracking-wider **:[[cmdk-group-heading]]:text-foreground **:[[cmdk-group-heading]]:uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"my-1 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"group/command-item relative flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        phosphor=\"CheckIcon\"\n        remixicon=\"RiCheckLine\"\n        className=\"ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/command",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/command-example.tsx",
+      "api": "https://github.com/dip/cmdk"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/component-example.json b/apps/v4/public/r/styles/base-sera/component-example.json
new file mode 100644
index 0000000000..5ee376bb99
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/component-example.json
@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "component-example",
+  "title": "Example",
+  "registryDependencies": [
+    "alert-dialog",
+    "badge",
+    "button",
+    "card",
+    "combobox",
+    "dropdown-menu",
+    "field",
+    "input",
+    "select",
+    "textarea",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/component-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-sera/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-sera/ui/badge\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-sera/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/base-sera/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-sera/ui/select\"\nimport { Textarea } from \"@/registry/base-sera/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger render={<Button />}>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n                data-icon=\"inline-start\"\n              />\n              Show Dialog\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                    remixicon=\"RiBluetoothLine\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                  remixicon=\"RiMore2Line\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                      remixicon=\"RiUserLine\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                      remixicon=\"RiBankCardLine\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                        remixicon=\"RiSettingsLine\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                              remixicon=\"RiKeyboardLine\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                              remixicon=\"RiTranslate\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                      remixicon=\"RiNotificationLine\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                      remixicon=\"RiMailLine\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                              remixicon=\"RiShieldLine\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/context-menu-example.json b/apps/v4/public/r/styles/base-sera/context-menu-example.json
new file mode 100644
index 0000000000..9a93b257cb
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/context-menu-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "context-menu-example",
+  "title": "Context Menu",
+  "registryDependencies": [
+    "button",
+    "context-menu",
+    "dialog",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/context-menu-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/base-sera/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-sera/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n  return (\n    <ExampleWrapper>\n      <ContextMenuBasic />\n      <ContextMenuWithIcons />\n      <ContextMenuWithSides />\n      <ContextMenuWithShortcuts />\n      <ContextMenuWithSubmenu />\n      <ContextMenuWithGroups />\n      <ContextMenuWithCheckboxes />\n      <ContextMenuWithRadio />\n      <ContextMenuWithDestructive />\n      <ContextMenuInDialog />\n      <ContextMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction ContextMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>Back</ContextMenuItem>\n            <ContextMenuItem disabled>Forward</ContextMenuItem>\n            <ContextMenuItem>Reload</ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ClipboardPasteIcon\"\n                tabler=\"IconClipboard\"\n                hugeicons=\"ClipboardIcon\"\n                phosphor=\"ClipboardIcon\"\n                remixicon=\"RiClipboardLine\"\n              />\n              Paste\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Back\n              <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem disabled>\n              Forward\n              <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Reload\n              <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSub>\n            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                <ContextMenuItem>Name Window...</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem>Developer Tools</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithGroups() {\n  return (\n    <Example title=\"With Groups, Labels & Separators\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>File</ContextMenuLabel>\n            <ContextMenuItem>\n              New File\n              <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Open File\n              <ContextMenuShortcut>⌘O</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Edit</ContextMenuLabel>\n            <ContextMenuItem>\n              Undo\n              <ContextMenuShortcut>⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Redo\n              <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Paste\n              <ContextMenuShortcut>⌘V</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              Delete\n              <ContextMenuShortcut>⌫</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuCheckboxItem defaultChecked>\n              Show Bookmarks Bar\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem defaultChecked>\n              Show Developer Tools\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithRadio() {\n  const [user, setUser] = React.useState(\"pedro\")\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>People</ContextMenuLabel>\n            <ContextMenuRadioGroup value={user} onValueChange={setUser}>\n              <ContextMenuRadioItem value=\"pedro\">\n                Pedro Duarte\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"colm\">\n                Colm Tuite\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"system\">System</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </ContextMenuItem>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSides() {\n  return (\n    <Example title=\"With Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <ContextMenu key={side}>\n            <ContextMenuTrigger className=\"flex aspect-[2/0.5] items-center justify-center rounded-lg border p-4 text-sm capitalize\">\n              {side.replace(\"-\", \" \")}\n            </ContextMenuTrigger>\n            <ContextMenuContent side={side}>\n              <ContextMenuGroup>\n                <ContextMenuItem>Back</ContextMenuItem>\n                <ContextMenuItem>Forward</ContextMenuItem>\n                <ContextMenuItem>Reload</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuContent>\n          </ContextMenu>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction ContextMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Context Menu Example</DialogTitle>\n            <DialogDescription>\n              Right click on the area below to see the context menu.\n            </DialogDescription>\n          </DialogHeader>\n          <ContextMenu>\n            <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n              Right click here\n            </ContextMenuTrigger>\n            <ContextMenuContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuSub>\n                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>\n                <ContextMenuSubContent>\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Save Page...</ContextMenuItem>\n                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                    <ContextMenuItem>Name Window...</ContextMenuItem>\n                  </ContextMenuGroup>\n                  <ContextMenuSeparator />\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Developer Tools</ContextMenuItem>\n                  </ContextMenuGroup>\n                </ContextMenuSubContent>\n              </ContextMenuSub>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuContent>\n          </ContextMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent className=\"w-44\">\n          <ContextMenuGroup>\n            <ContextMenuLabel>Actions</ContextMenuLabel>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem inset>Paste</ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel inset>Appearance</ContextMenuLabel>\n            <ContextMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel inset>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem inset value=\"light\">\n                Light\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem inset value=\"dark\">\n                Dark\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem inset value=\"system\">\n                System\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuSub>\n            <ContextMenuSubTrigger inset>More Options</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/context-menu.json b/apps/v4/public/r/styles/base-sera/context-menu.json
new file mode 100644
index 0000000000..2e06947ebc
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/context-menu.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "context-menu",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/context-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<\n    ContextMenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"cn-menu-target cn-menu-translucent z-50 max-h-(--available-height) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase data-inset:pl-9.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: ContextMenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/context-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\n  return (\n    <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        className=\"cn-rtl-flip ml-auto\"\n      />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  ...props\n}: React.ComponentProps<typeof ContextMenuContent>) {\n  return (\n    <ContextMenuContent\n      data-slot=\"context-menu-sub-content\"\n      className=\"cn-menu-target cn-menu-translucent shadow-md\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2\">\n        <ContextMenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </ContextMenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: ContextMenuPrimitive.RadioGroup.Props) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2\">\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: ContextMenuPrimitive.Separator.Props) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"-mx-1.5 my-1.5 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/context-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/context-menu-example.tsx",
+      "api": "https://base-ui.com/react/components/context-menu.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/dashboard-01.json b/apps/v4/public/r/styles/base-sera/dashboard-01.json
new file mode 100644
index 0000000000..0fd7321c3b
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/dashboard-01.json
@@ -0,0 +1,101 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dashboard-01",
+  "title": "Dashboard 01",
+  "description": "A dashboard with sidebar, charts and data table.",
+  "dependencies": [
+    "@dnd-kit/core",
+    "@dnd-kit/modifiers",
+    "@dnd-kit/sortable",
+    "@dnd-kit/utilities",
+    "@tanstack/react-table",
+    "zod"
+  ],
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "chart",
+    "card",
+    "select",
+    "tabs",
+    "table",
+    "toggle-group",
+    "badge",
+    "button",
+    "checkbox",
+    "dropdown-menu",
+    "drawer",
+    "input",
+    "avatar",
+    "sheet",
+    "sonner"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/dashboard-01/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/base-sera/blocks/dashboard-01/components/app-sidebar\"\nimport { ChartAreaInteractive } from \"@/registry/base-sera/blocks/dashboard-01/components/chart-area-interactive\"\nimport { DataTable } from \"@/registry/base-sera/blocks/dashboard-01/components/data-table\"\nimport { SectionCards } from \"@/registry/base-sera/blocks/dashboard-01/components/section-cards\"\nimport { SiteHeader } from \"@/registry/base-sera/blocks/dashboard-01/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/base-sera/ui/sidebar\"\n\nimport data from \"./data.json\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"calc(var(--spacing) * 72)\",\n          \"--header-height\": \"calc(var(--spacing) * 12)\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar variant=\"inset\" />\n      <SidebarInset>\n        <SiteHeader />\n        <div className=\"flex flex-1 flex-col\">\n          <div className=\"@container/main flex flex-1 flex-col gap-2\">\n            <div className=\"flex flex-col gap-4 py-4 md:gap-6 md:py-6\">\n              <SectionCards />\n              <div className=\"px-4 lg:px-6\">\n                <ChartAreaInteractive />\n              </div>\n              <DataTable data={data} />\n            </div>\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/dashboard-01/data.json",
+      "content": "[\n  {\n    \"id\": 1,\n    \"header\": \"Cover page\",\n    \"type\": \"Cover page\",\n    \"status\": \"In Process\",\n    \"target\": \"18\",\n    \"limit\": \"5\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 2,\n    \"header\": \"Table of contents\",\n    \"type\": \"Table of contents\",\n    \"status\": \"Done\",\n    \"target\": \"29\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 3,\n    \"header\": \"Executive summary\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"10\",\n    \"limit\": \"13\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 4,\n    \"header\": \"Technical approach\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"27\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 5,\n    \"header\": \"Design\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"2\",\n    \"limit\": \"16\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 6,\n    \"header\": \"Capabilities\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"20\",\n    \"limit\": \"8\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 7,\n    \"header\": \"Integration with existing systems\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"21\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 8,\n    \"header\": \"Innovation and Advantages\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"25\",\n    \"limit\": \"26\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 9,\n    \"header\": \"Overview of EMR's Innovative Solutions\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"7\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 10,\n    \"header\": \"Advanced Algorithms and Machine Learning\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"30\",\n    \"limit\": \"28\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 11,\n    \"header\": \"Adaptive Communication Protocols\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"9\",\n    \"limit\": \"31\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 12,\n    \"header\": \"Advantages Over Current Technologies\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"12\",\n    \"limit\": \"0\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 13,\n    \"header\": \"Past Performance\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"33\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 14,\n    \"header\": \"Customer Feedback and Satisfaction Levels\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"15\",\n    \"limit\": \"34\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 15,\n    \"header\": \"Implementation Challenges and Solutions\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"3\",\n    \"limit\": \"35\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 16,\n    \"header\": \"Security Measures and Data Protection Policies\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"6\",\n    \"limit\": \"36\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 17,\n    \"header\": \"Scalability and Future Proofing\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"4\",\n    \"limit\": \"37\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 18,\n    \"header\": \"Cost-Benefit Analysis\",\n    \"type\": \"Plain language\",\n    \"status\": \"Done\",\n    \"target\": \"14\",\n    \"limit\": \"38\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 19,\n    \"header\": \"User Training and Onboarding Experience\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"17\",\n    \"limit\": \"39\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 20,\n    \"header\": \"Future Development Roadmap\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"11\",\n    \"limit\": \"40\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 21,\n    \"header\": \"System Architecture Overview\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"24\",\n    \"limit\": \"18\",\n    \"reviewer\": \"Maya Johnson\"\n  },\n  {\n    \"id\": 22,\n    \"header\": \"Risk Management Plan\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"15\",\n    \"limit\": \"22\",\n    \"reviewer\": \"Carlos Rodriguez\"\n  },\n  {\n    \"id\": 23,\n    \"header\": \"Compliance Documentation\",\n    \"type\": \"Legal\",\n    \"status\": \"In Process\",\n    \"target\": \"31\",\n    \"limit\": \"27\",\n    \"reviewer\": \"Sarah Chen\"\n  },\n  {\n    \"id\": 24,\n    \"header\": \"API Documentation\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"8\",\n    \"limit\": \"12\",\n    \"reviewer\": \"Raj Patel\"\n  },\n  {\n    \"id\": 25,\n    \"header\": \"User Interface Mockups\",\n    \"type\": \"Visual\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"25\",\n    \"reviewer\": \"Leila Ahmadi\"\n  },\n  {\n    \"id\": 26,\n    \"header\": \"Database Schema\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"20\",\n    \"reviewer\": \"Thomas Wilson\"\n  },\n  {\n    \"id\": 27,\n    \"header\": \"Testing Methodology\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"17\",\n    \"limit\": \"14\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 28,\n    \"header\": \"Deployment Strategy\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"26\",\n    \"limit\": \"30\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 29,\n    \"header\": \"Budget Breakdown\",\n    \"type\": \"Financial\",\n    \"status\": \"In Process\",\n    \"target\": \"13\",\n    \"limit\": \"16\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 30,\n    \"header\": \"Market Analysis\",\n    \"type\": \"Research\",\n    \"status\": \"Done\",\n    \"target\": \"29\",\n    \"limit\": \"32\",\n    \"reviewer\": \"Sophia Martinez\"\n  },\n  {\n    \"id\": 31,\n    \"header\": \"Competitor Comparison\",\n    \"type\": \"Research\",\n    \"status\": \"In Process\",\n    \"target\": \"21\",\n    \"limit\": \"19\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 32,\n    \"header\": \"Maintenance Plan\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"16\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Alex Thompson\"\n  },\n  {\n    \"id\": 33,\n    \"header\": \"User Personas\",\n    \"type\": \"Research\",\n    \"status\": \"In Process\",\n    \"target\": \"27\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Nina Patel\"\n  },\n  {\n    \"id\": 34,\n    \"header\": \"Accessibility Compliance\",\n    \"type\": \"Legal\",\n    \"status\": \"Done\",\n    \"target\": \"18\",\n    \"limit\": \"21\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 35,\n    \"header\": \"Performance Metrics\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"23\",\n    \"limit\": \"26\",\n    \"reviewer\": \"David Kim\"\n  },\n  {\n    \"id\": 36,\n    \"header\": \"Disaster Recovery Plan\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"14\",\n    \"limit\": \"17\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 37,\n    \"header\": \"Third-party Integrations\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"25\",\n    \"limit\": \"28\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 38,\n    \"header\": \"User Feedback Summary\",\n    \"type\": \"Research\",\n    \"status\": \"Done\",\n    \"target\": \"20\",\n    \"limit\": \"15\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 39,\n    \"header\": \"Localization Strategy\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"12\",\n    \"limit\": \"19\",\n    \"reviewer\": \"Maria Garcia\"\n  },\n  {\n    \"id\": 40,\n    \"header\": \"Mobile Compatibility\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"28\",\n    \"limit\": \"31\",\n    \"reviewer\": \"James Wilson\"\n  },\n  {\n    \"id\": 41,\n    \"header\": \"Data Migration Plan\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"22\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 42,\n    \"header\": \"Quality Assurance Protocols\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"30\",\n    \"limit\": \"33\",\n    \"reviewer\": \"Priya Singh\"\n  },\n  {\n    \"id\": 43,\n    \"header\": \"Stakeholder Analysis\",\n    \"type\": \"Research\",\n    \"status\": \"In Process\",\n    \"target\": \"11\",\n    \"limit\": \"14\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 44,\n    \"header\": \"Environmental Impact Assessment\",\n    \"type\": \"Research\",\n    \"status\": \"Done\",\n    \"target\": \"24\",\n    \"limit\": \"27\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 45,\n    \"header\": \"Intellectual Property Rights\",\n    \"type\": \"Legal\",\n    \"status\": \"In Process\",\n    \"target\": \"17\",\n    \"limit\": \"20\",\n    \"reviewer\": \"Sarah Johnson\"\n  },\n  {\n    \"id\": 46,\n    \"header\": \"Customer Support Framework\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"25\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 47,\n    \"header\": \"Version Control Strategy\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"15\",\n    \"limit\": \"18\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 48,\n    \"header\": \"Continuous Integration Pipeline\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"26\",\n    \"limit\": \"29\",\n    \"reviewer\": \"Michael Chen\"\n  },\n  {\n    \"id\": 49,\n    \"header\": \"Regulatory Compliance\",\n    \"type\": \"Legal\",\n    \"status\": \"In Process\",\n    \"target\": \"13\",\n    \"limit\": \"16\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 50,\n    \"header\": \"User Authentication System\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"28\",\n    \"limit\": \"31\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 51,\n    \"header\": \"Data Analytics Framework\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"21\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 52,\n    \"header\": \"Cloud Infrastructure\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"16\",\n    \"limit\": \"19\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 53,\n    \"header\": \"Network Security Measures\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"29\",\n    \"limit\": \"32\",\n    \"reviewer\": \"Lisa Wong\"\n  },\n  {\n    \"id\": 54,\n    \"header\": \"Project Timeline\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"14\",\n    \"limit\": \"17\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 55,\n    \"header\": \"Resource Allocation\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"27\",\n    \"limit\": \"30\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 56,\n    \"header\": \"Team Structure and Roles\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"20\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 57,\n    \"header\": \"Communication Protocols\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"15\",\n    \"limit\": \"18\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 58,\n    \"header\": \"Success Metrics\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"30\",\n    \"limit\": \"33\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 59,\n    \"header\": \"Internationalization Support\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"23\",\n    \"limit\": \"26\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 60,\n    \"header\": \"Backup and Recovery Procedures\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"18\",\n    \"limit\": \"21\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 61,\n    \"header\": \"Monitoring and Alerting System\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"25\",\n    \"limit\": \"28\",\n    \"reviewer\": \"Daniel Park\"\n  },\n  {\n    \"id\": 62,\n    \"header\": \"Code Review Guidelines\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"12\",\n    \"limit\": \"15\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 63,\n    \"header\": \"Documentation Standards\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"27\",\n    \"limit\": \"30\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 64,\n    \"header\": \"Release Management Process\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"25\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 65,\n    \"header\": \"Feature Prioritization Matrix\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"22\",\n    \"reviewer\": \"Emma Davis\"\n  },\n  {\n    \"id\": 66,\n    \"header\": \"Technical Debt Assessment\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"24\",\n    \"limit\": \"27\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 67,\n    \"header\": \"Capacity Planning\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"21\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 68,\n    \"header\": \"Service Level Agreements\",\n    \"type\": \"Legal\",\n    \"status\": \"Done\",\n    \"target\": \"26\",\n    \"limit\": \"29\",\n    \"reviewer\": \"Assign reviewer\"\n  }\n]\n",
+      "type": "registry:file",
+      "target": "app/dashboard/data.json"
+    },
+    {
+      "path": "registry/base-sera/blocks/dashboard-01/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavDocuments } from \"@/registry/base-sera/blocks/dashboard-01/components/nav-documents\"\nimport { NavMain } from \"@/registry/base-sera/blocks/dashboard-01/components/nav-main\"\nimport { NavSecondary } from \"@/registry/base-sera/blocks/dashboard-01/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-sera/blocks/dashboard-01/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Dashboard\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LayoutDashboardIcon\"\n          tabler=\"IconDashboard\"\n          hugeicons=\"DashboardSquare01Icon\"\n          phosphor=\"SquaresFourIcon\"\n          remixicon=\"RiDashboardLine\"\n        />\n      ),\n    },\n    {\n      title: \"Lifecycle\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ListIcon\"\n          tabler=\"IconListDetails\"\n          hugeicons=\"Menu01Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiListUnordered\"\n        />\n      ),\n    },\n    {\n      title: \"Analytics\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartBarIcon\"\n          tabler=\"IconChartBar\"\n          hugeicons=\"ChartHistogramIcon\"\n          phosphor=\"ChartBarIcon\"\n          remixicon=\"RiBarChartLine\"\n        />\n      ),\n    },\n    {\n      title: \"Projects\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FolderIcon\"\n          tabler=\"IconFolder\"\n          hugeicons=\"Folder01Icon\"\n          phosphor=\"FolderIcon\"\n          remixicon=\"RiFolderLine\"\n        />\n      ),\n    },\n    {\n      title: \"Team\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"UsersIcon\"\n          tabler=\"IconUsers\"\n          hugeicons=\"UserGroupIcon\"\n          phosphor=\"UsersIcon\"\n          remixicon=\"RiGroupLine\"\n        />\n      ),\n    },\n  ],\n  navClouds: [\n    {\n      title: \"Capture\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CameraIcon\"\n          tabler=\"IconCamera\"\n          hugeicons=\"Camera01Icon\"\n          phosphor=\"CameraIcon\"\n          remixicon=\"RiCameraLine\"\n        />\n      ),\n      isActive: true,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Proposal\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileDescription\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Prompts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileAi\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      title: \"Get Help\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CircleHelpIcon\"\n          tabler=\"IconHelp\"\n          hugeicons=\"HelpCircleIcon\"\n          phosphor=\"QuestionIcon\"\n          remixicon=\"RiQuestionLine\"\n        />\n      ),\n    },\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SearchIcon\"\n          tabler=\"IconSearch\"\n          hugeicons=\"SearchIcon\"\n          phosphor=\"MagnifyingGlassIcon\"\n          remixicon=\"RiSearchLine\"\n        />\n      ),\n    },\n  ],\n  documents: [\n    {\n      name: \"Data Library\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"DatabaseIcon\"\n          tabler=\"IconDatabase\"\n          hugeicons=\"Database01Icon\"\n          phosphor=\"DatabaseIcon\"\n          remixicon=\"RiDatabase2Line\"\n        />\n      ),\n    },\n    {\n      name: \"Reports\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileChartColumnIcon\"\n          tabler=\"IconReport\"\n          hugeicons=\"Analytics01Icon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiFileChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Word Assistant\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFileWord\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n      ),\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"offcanvas\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton\n              className=\"data-[slot=sidebar-menu-button]:p-1.5!\"\n              render={<a href=\"#\" />}\n            >\n              <IconPlaceholder\n                lucide=\"CommandIcon\"\n                tabler=\"IconInnerShadowTop\"\n                hugeicons=\"CommandIcon\"\n                phosphor=\"CommandIcon\"\n                remixicon=\"RiCommandLine\"\n                className=\"size-5!\"\n              />\n              <span className=\"text-base font-semibold\">Acme Inc.</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavDocuments items={data.documents} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/dashboard-01/components/chart-area-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { useIsMobile } from \"@/registry/base-sera/hooks/use-mobile\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-sera/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-sera/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-sera/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/base-sera/ui/toggle-group\"\n\nexport const description = \"An interactive area chart\"\n\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaInteractive() {\n  const isMobile = useIsMobile()\n  const [timeRange, setTimeRange] = React.useState(\"90d\")\n\n  React.useEffect(() => {\n    if (isMobile) {\n      setTimeRange(\"7d\")\n    }\n  }, [isMobile])\n\n  const filteredData = chartData.filter((item) => {\n    const date = new Date(item.date)\n    const referenceDate = new Date(\"2024-06-30\")\n    let daysToSubtract = 90\n    if (timeRange === \"30d\") {\n      daysToSubtract = 30\n    } else if (timeRange === \"7d\") {\n      daysToSubtract = 7\n    }\n    const startDate = new Date(referenceDate)\n    startDate.setDate(startDate.getDate() - daysToSubtract)\n    return date >= startDate\n  })\n\n  return (\n    <Card className=\"@container/card\">\n      <CardHeader>\n        <CardTitle>Total Visitors</CardTitle>\n        <CardDescription>\n          <span className=\"hidden @[540px]/card:block\">\n            Total for the last 3 months\n          </span>\n          <span className=\"@[540px]/card:hidden\">Last 3 months</span>\n        </CardDescription>\n        <CardAction>\n          <ToggleGroup\n            multiple={false}\n            value={timeRange ? [timeRange] : []}\n            onValueChange={(value) => {\n              setTimeRange(value[0] ?? \"90d\")\n            }}\n            variant=\"outline\"\n            className=\"hidden *:data-[slot=toggle-group-item]:px-4! @[767px]/card:flex\"\n          >\n            <ToggleGroupItem value=\"90d\">Last 3 months</ToggleGroupItem>\n            <ToggleGroupItem value=\"30d\">Last 30 days</ToggleGroupItem>\n            <ToggleGroupItem value=\"7d\">Last 7 days</ToggleGroupItem>\n          </ToggleGroup>\n          <Select\n            value={timeRange}\n            onValueChange={(value) => {\n              if (value !== null) {\n                setTimeRange(value)\n              }\n            }}\n          >\n            <SelectTrigger\n              className=\"flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden\"\n              size=\"sm\"\n              aria-label=\"Select a value\"\n            >\n              <SelectValue placeholder=\"Last 3 months\" />\n            </SelectTrigger>\n            <SelectContent className=\"rounded-xl\">\n              <SelectItem value=\"90d\" className=\"rounded-lg\">\n                Last 3 months\n              </SelectItem>\n              <SelectItem value=\"30d\" className=\"rounded-lg\">\n                Last 30 days\n              </SelectItem>\n              <SelectItem value=\"7d\" className=\"rounded-lg\">\n                Last 7 days\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </CardAction>\n      </CardHeader>\n      <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <AreaChart data={filteredData}>\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={1.0}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                    })\n                  }}\n                  indicator=\"dot\"\n                />\n              }\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/dashboard-01/components/data-table.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-sera/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-sera/ui/badge\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-sera/ui/chart\"\nimport { Checkbox } from \"@/registry/base-sera/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-sera/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport { Label } from \"@/registry/base-sera/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-sera/ui/select\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-sera/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-sera/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"size-3 text-muted-foreground\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={table.getIsAllPageRowsSelected()}\n          indeterminate={\n            table.getIsSomePageRowsSelected() &&\n            !table.getIsAllPageRowsSelected()\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select\n            items={[\n              { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n              { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n            ]}\n          >\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              className=\"flex size-8 text-muted-foreground data-open:bg-muted\"\n              size=\"icon\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"EllipsisVerticalIcon\"\n            tabler=\"IconDotsVertical\"\n            hugeicons=\"MoreVerticalCircle01Icon\"\n            phosphor=\"DotsThreeVerticalIcon\"\n            remixicon=\"RiMore2Line\"\n          />\n          <span className=\"sr-only\">Open menu</span>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select\n          defaultValue=\"outline\"\n          items={[\n            { label: \"Outline\", value: \"outline\" },\n            { label: \"Past Performance\", value: \"past-performance\" },\n            { label: \"Key Personnel\", value: \"key-personnel\" },\n            { label: \"Focus Documents\", value: \"focus-documents\" },\n          ]}\n        >\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"sm\" />}\n            >\n              <IconPlaceholder\n                lucide=\"Columns3Icon\"\n                tabler=\"IconLayoutColumns\"\n                hugeicons=\"LeftToRightListBulletIcon\"\n                phosphor=\"ColumnsIcon\"\n                remixicon=\"RiLayoutColumnLine\"\n                data-icon=\"inline-start\"\n              />\n              Columns\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n                items={[10, 20, 30, 40, 50].map((pageSize) => ({\n                  label: `${pageSize}`,\n                  value: `${pageSize}`,\n                }))}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\nconst chartData = [\n  {\n    month: \"January\",\n    desktop: 186,\n    mobile: 80,\n  },\n  {\n    month: \"February\",\n    desktop: 305,\n    mobile: 200,\n  },\n  {\n    month: \"March\",\n    desktop: 237,\n    mobile: 120,\n  },\n  {\n    month: \"April\",\n    desktop: 73,\n    mobile: 190,\n  },\n  {\n    month: \"May\",\n    desktop: 209,\n    mobile: 130,\n  },\n  {\n    month: \"June\",\n    desktop: 214,\n    mobile: 140,\n  },\n]\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"w-fit px-0 text-left text-foreground\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select\n                  defaultValue={item.type}\n                  items={[\n                    { label: \"Table of Contents\", value: \"Table of Contents\" },\n                    { label: \"Executive Summary\", value: \"Executive Summary\" },\n                    {\n                      label: \"Technical Approach\",\n                      value: \"Technical Approach\",\n                    },\n                    { label: \"Design\", value: \"Design\" },\n                    { label: \"Capabilities\", value: \"Capabilities\" },\n                    { label: \"Focus Documents\", value: \"Focus Documents\" },\n                    { label: \"Narrative\", value: \"Narrative\" },\n                    { label: \"Cover Page\", value: \"Cover Page\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select\n                  defaultValue={item.status}\n                  items={[\n                    { label: \"Done\", value: \"Done\" },\n                    { label: \"In Progress\", value: \"In Progress\" },\n                    { label: \"Not Started\", value: \"Not Started\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select\n                defaultValue={item.reviewer}\n                items={[\n                  { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n                  { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n                  { label: \"Emily Whalen\", value: \"Emily Whalen\" },\n                ]}\n              >\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\" />\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/dashboard-01/components/nav-documents.tsx",
+      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavDocuments({\n  items,\n}: {\n  items: {\n    name: string\n    url: string\n    icon: React.ReactNode\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Documents</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton render={<a href={item.url} />}>\n              {item.icon}\n              <span>{item.name}</span>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <SidebarMenuAction\n                    showOnHover\n                    className=\"aria-expanded:bg-muted\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeOutlineIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-24\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"Folder01Icon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Open</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare3\"\n                    hugeicons=\"Share01Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                  <span>Share</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"Trash2Icon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n              className=\"text-sidebar-foreground/70\"\n            />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/dashboard-01/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground\"\n            >\n              <IconPlaceholder\n                lucide=\"CirclePlusIcon\"\n                tabler=\"IconCirclePlusFilled\"\n                hugeicons=\"PlusSignCircleIcon\"\n                phosphor=\"PlusCircleIcon\"\n                remixicon=\"RiAddCircleFill\"\n              />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"Mail01Icon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/dashboard-01/components/nav-secondary.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton render={<a href={item.url} />}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/dashboard-01/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-sera/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton size=\"lg\" className=\"aria-expanded:bg-muted\" />\n            }\n          >\n            <Avatar className=\"size-8 rounded-lg grayscale\">\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"truncate text-xs text-foreground/70\">\n                {user.email}\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"EllipsisVerticalIcon\"\n              tabler=\"IconDotsVertical\"\n              hugeicons=\"MoreVerticalCircle01Icon\"\n              phosphor=\"DotsThreeVerticalIcon\"\n              remixicon=\"RiMore2Line\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                  <Avatar className=\"size-8\">\n                    <AvatarImage src={user.avatar} alt={user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">{user.name}</span>\n                    <span className=\"truncate text-xs text-muted-foreground\">\n                      {user.email}\n                    </span>\n                  </div>\n                </div>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleUserRoundIcon\"\n                  tabler=\"IconUserCircle\"\n                  hugeicons=\"UserCircle02Icon\"\n                  phosphor=\"UserCircleIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconNotification\"\n                  hugeicons=\"Notification03Icon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotification3Line\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"Logout01Icon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/dashboard-01/components/section-cards.tsx",
+      "content": "\"use client\"\n\nimport { Badge } from \"@/registry/base-sera/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-sera/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-linear-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingDownIcon\"\n                tabler=\"IconTrendingDown\"\n                hugeicons=\"ChartDownIcon\"\n                phosphor=\"TrendDownIcon\"\n                remixicon=\"RiArrowDownLine\"\n              />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingDownIcon\"\n              tabler=\"IconTrendingDown\"\n              hugeicons=\"ChartDownIcon\"\n              phosphor=\"TrendDownIcon\"\n              remixicon=\"RiArrowDownLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/dashboard-01/components/site-header.tsx",
+      "content": "import { Separator } from \"@/registry/base-sera/ui/separator\"\nimport { SidebarTrigger } from \"@/registry/base-sera/ui/sidebar\"\n\nexport function SiteHeader() {\n  return (\n    <header className=\"flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)\">\n      <div className=\"flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6\">\n        <SidebarTrigger className=\"-ml-1\" />\n        <Separator\n          orientation=\"vertical\"\n          className=\"mx-2 h-4 data-vertical:self-auto\"\n        />\n        <h1 className=\"text-base font-medium\">Documents</h1>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "1000px"
+  },
+  "categories": [
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/demo.json b/apps/v4/public/r/styles/base-sera/demo.json
new file mode 100644
index 0000000000..b965ef391e
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/demo.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo",
+  "title": "Demo",
+  "registryDependencies": [
+    "alert-dialog",
+    "badge",
+    "button",
+    "button-group",
+    "card",
+    "checkbox",
+    "dropdown-menu",
+    "field",
+    "input-group",
+    "item",
+    "radio-group",
+    "slider",
+    "switch",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-sera/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-sera/ui/badge\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-sera/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-sera/ui/card\"\nimport { Checkbox } from \"@/registry/base-sera/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-sera/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-sera/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-sera/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-sera/ui/radio-group\"\nimport { Slider } from \"@/registry/base-sera/ui/slider\"\nimport { Switch } from \"@/registry/base-sera/ui/switch\"\nimport { Textarea } from \"@/registry/base-sera/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/dialog-example.json b/apps/v4/public/r/styles/base-sera/dialog-example.json
new file mode 100644
index 0000000000..4efbb4f27e
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/dialog-example.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog-example",
+  "title": "Dialog",
+  "registryDependencies": [
+    "button",
+    "checkbox",
+    "dialog",
+    "field",
+    "input",
+    "input-group",
+    "kbd",
+    "native-select",
+    "select",
+    "switch",
+    "tabs",
+    "textarea",
+    "tooltip",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/dialog-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { Checkbox } from \"@/registry/base-sera/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-sera/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-sera/ui/input-group\"\nimport { Kbd } from \"@/registry/base-sera/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-sera/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-sera/ui/select\"\nimport { Switch } from \"@/registry/base-sera/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-sera/ui/tabs\"\nimport { Textarea } from \"@/registry/base-sera/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-sera/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 render={<Button variant=\"outline\" />}>\n            Edit Profile\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 render={<Button variant=\"outline\" />}>\n                Cancel\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 render={<Button variant=\"outline\" />}>\n          Scrollable Content\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=\"no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4 style-luma:-mx-6 style-luma:px-6\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\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 render={<Button variant=\"outline\" />}>\n          Sticky Footer\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=\"no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4 style-luma:-mx-6 style-luma:px-6\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\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 render={<Button variant=\"outline\" />}>\n              Close\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 render={<Button variant=\"outline\" />}>\n          No Close 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 render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"Auto\", value: \"auto\" },\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\nconst themes = [\n  { label: \"Light\", value: \"light\" },\n  { label: \"Dark\", value: \"dark\" },\n  { label: \"System\", value: \"system\" },\n]\n\nconst accents = [\n  { label: \"Default\", value: \"default\" },\n  { label: \"Red\", value: \"red\" },\n  { label: \"Blue\", value: \"blue\" },\n  { label: \"Green\", value: \"green\" },\n  { label: \"Purple\", value: \"purple\" },\n  { label: \"Pink\", value: \"pink\" },\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 render={<Button variant=\"outline\" />}>\n          Chat Settings\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=\"border style-vega:min-h-[550px] style-vega:rounded-lg style-vega:p-6 style-nova:min-h-[460px] style-nova:rounded-lg style-nova:p-4 style-lyra:min-h-[450px] style-lyra:rounded-none style-lyra:p-4 style-maia:min-h-[550px] style-maia:rounded-xl style-maia:p-6 style-mira:min-h-[450px] style-mira:rounded-md style-mira:p-4 style-luma:min-h-[550px] style-luma:rounded-xl style-luma:p-6 [&_[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\n                          items={themes}\n                          value={theme}\n                          onValueChange={(value) => setTheme(value as string)}\n                        >\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {themes.map((theme) => (\n                                <SelectItem\n                                  key={theme.value}\n                                  value={theme.value}\n                                >\n                                  {theme.label}\n                                </SelectItem>\n                              ))}\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                          items={accents}\n                          value={accentColor}\n                          onValueChange={(value) =>\n                            setAccentColor(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {accents.map((accent) => (\n                                <SelectItem\n                                  key={accent.value}\n                                  value={accent.value}\n                                >\n                                  {accent.label}\n                                </SelectItem>\n                              ))}\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                          items={spokenLanguages}\n                          value={spokenLanguage}\n                          onValueChange={(value) =>\n                            setSpokenLanguage(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\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\n                          items={voices}\n                          value={voice}\n                          onValueChange={(value) => setVoice(value as string)}\n                        >\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\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\n                              render={<InputGroupButton size=\"icon-xs\" />}\n                            >\n                              <IconPlaceholder\n                                lucide=\"InfoIcon\"\n                                tabler=\"IconInfoCircle\"\n                                hugeicons=\"AlertCircleIcon\"\n                                phosphor=\"InfoIcon\"\n                                remixicon=\"RiInformationLine\"\n                              />\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"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/dialog.json b/apps/v4/public/r/styles/base-sera/dialog.json
new file mode 100644
index 0000000000..d3dce730d1
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/dialog.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/ui/dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/20 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-none bg-popover p-6 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-5 right-5 bg-secondary\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\n        \"cn-font-heading text-lg leading-none tracking-wider uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"mt-0.5 text-sm leading-relaxed text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dialog-example.tsx",
+      "api": "https://base-ui.com/react/components/dialog.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/direction.json b/apps/v4/public/r/styles/base-sera/direction.json
new file mode 100644
index 0000000000..e4f623167b
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/direction.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "direction",
+  "dependencies": [
+    "@base-ui/react"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/ui/direction.tsx",
+      "content": "\"use client\"\n\nexport {\n  DirectionProvider,\n  useDirection,\n} from \"@base-ui/react/direction-provider\"\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/direction",
+      "api": "https://base-ui.com/react/utils/direction-provider.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/drawer-example.json b/apps/v4/public/r/styles/base-sera/drawer-example.json
new file mode 100644
index 0000000000..a0ae6b7f79
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/drawer-example.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer-example",
+  "title": "Drawer",
+  "registryDependencies": [
+    "drawer",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/drawer-example.tsx",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-sera/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\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          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/drawer.json b/apps/v4/public/r/styles/base-sera/drawer.json
new file mode 100644
index 0000000000..60953f9a48
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/drawer.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer",
+  "dependencies": [
+    "vaul"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/ui/drawer.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-sera/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(\n        \"fixed inset-0 z-50 bg-black/20 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\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          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground 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=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t 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=left]:rounded-none data-[vaul-drawer-direction=left]:border-r 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=right]:rounded-none data-[vaul-drawer-direction=right]:border-l 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=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-none bg-muted 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(\n        \"flex flex-col 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:gap-2 md:text-left\",\n        className\n      )}\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(\"mt-auto flex flex-col gap-2 p-4\", 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(\n        \"cn-font-heading text-lg tracking-wider text-foreground uppercase\",\n        className\n      )}\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(\n        \"mt-0.5 text-sm leading-relaxed text-muted-foreground\",\n        className\n      )}\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"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/drawer",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
+      "api": "https://vaul.emilkowal.ski/getting-started"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/dropdown-menu-example.json b/apps/v4/public/r/styles/base-sera/dropdown-menu-example.json
new file mode 100644
index 0000000000..ef038a1807
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/dropdown-menu-example.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu-example",
+  "title": "Dropdown Menu",
+  "registryDependencies": [
+    "avatar",
+    "button",
+    "dialog",
+    "dropdown-menu",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/dropdown-menu-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-sera/ui/avatar\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-sera/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuSides />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>GitHub</DropdownMenuItem>\n          <DropdownMenuItem>Support</DropdownMenuItem>\n          <DropdownMenuItem disabled>API</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <DropdownMenu key={side}>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </DropdownMenuTrigger>\n            <DropdownMenuContent side={side}>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>Profile</DropdownMenuItem>\n                <DropdownMenuItem>Billing</DropdownMenuItem>\n                <DropdownMenuItem>Settings</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"UserIcon\"\n              tabler=\"IconUser\"\n              hugeicons=\"UserIcon\"\n              phosphor=\"UserIcon\"\n              remixicon=\"RiUserLine\"\n            />\n            Profile\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"CreditCardIcon\"\n              tabler=\"IconCreditCard\"\n              hugeicons=\"CreditCardIcon\"\n              phosphor=\"CreditCardIcon\"\n              remixicon=\"RiBankCardLine\"\n            />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n            Settings\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"LogOutIcon\"\n              tabler=\"IconLogout\"\n              hugeicons=\"LogoutIcon\"\n              phosphor=\"SignOutIcon\"\n              remixicon=\"RiLogoutBoxLine\"\n            />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            Log out\n            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuItem>Email</DropdownMenuItem>\n                  <DropdownMenuItem>Message</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>More...</DropdownMenuItem>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Checkboxes\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Radio Group\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Notifications\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Payment Method\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Actions\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"PencilIcon\"\n              tabler=\"IconPencil\"\n              hugeicons=\"EditIcon\"\n              phosphor=\"PencilIcon\"\n              remixicon=\"RiPencilLine\"\n            />\n            Edit\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"ShareIcon\"\n              phosphor=\"ShareIcon\"\n              remixicon=\"RiShareLine\"\n            />\n            Share\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ArchiveIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n            Archive\n          </DropdownMenuItem>\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"DeleteIcon\"\n              phosphor=\"TrashIcon\"\n              remixicon=\"RiDeleteBinLine\"\n            />\n            Delete\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <IconPlaceholder\n          lucide=\"LogOutIcon\"\n          tabler=\"IconLogout\"\n          hugeicons=\"LogoutIcon\"\n          phosphor=\"SignOutIcon\"\n          remixicon=\"RiLogoutBoxLine\"\n        />\n        Sign Out\n      </DropdownMenuItem>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"truncate text-xs text-muted-foreground\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                  remixicon=\"RiClipboardLine\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/dropdown-menu.json b/apps/v4/public/r/styles/base-sera/dropdown-menu.json
new file mode 100644
index 0000000000..afa284dc77
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/dropdown-menu.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/dropdown-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"cn-menu-target cn-menu-translucent z-50 max-h-(--available-height) w-(--anchor-width) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase data-inset:pl-9.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        className=\"cn-rtl-flip ml-auto\"\n      />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  align = \"start\",\n  alignOffset = -3,\n  side = \"right\",\n  sideOffset = 0,\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"cn-menu-target cn-menu-translucent w-auto min-w-36 rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n  return (\n    <MenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: MenuPrimitive.RadioItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"-mx-1.5 my-1.5 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/dropdown-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx",
+      "api": "https://base-ui.com/react/components/menu.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/empty-example.json b/apps/v4/public/r/styles/base-sera/empty-example.json
new file mode 100644
index 0000000000..ac5cb3bbd0
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/empty-example.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "empty-example",
+  "title": "Empty",
+  "registryDependencies": [
+    "button",
+    "empty",
+    "input-group",
+    "kbd",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/empty-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/base-sera/ui/empty\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-sera/ui/input-group\"\nimport { Kbd } from \"@/registry/base-sera/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n  return (\n    <ExampleWrapper>\n      <EmptyBasic />\n      <EmptyWithMutedBackground />\n      <EmptyWithBorder />\n      <EmptyWithIcon />\n      <EmptyWithMutedBackgroundAlt />\n      <EmptyInCard />\n    </ExampleWrapper>\n  )\n}\n\nfunction EmptyBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackground() {\n  return (\n    <Example title=\"With Muted Background\">\n      <Empty className=\"bg-muted\">\n        <EmptyHeader>\n          <EmptyTitle>No results found</EmptyTitle>\n          <EmptyDescription>\n            No results found for your search. Try adjusting your search terms.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Try again</Button>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithBorder() {\n  return (\n    <Example title=\"With Border\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n                remixicon=\"RiLoaderLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n              remixicon=\"RiFolderLine\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>Nothing to see here</EmptyTitle>\n          <EmptyDescription>\n            No posts have been created yet. Get started by{\" \"}\n            <a href=\"#\">creating your first post</a>.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            New Post\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n  return (\n    <Example title=\"With Muted Background Alt\">\n      <Empty className=\"bg-muted/50\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n                remixicon=\"RiLoaderLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n              remixicon=\"RiFolderLine\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/empty.json b/apps/v4/public/r/styles/base-sera/empty.json
new file mode 100644
index 0000000000..8e8e2c82fb
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/empty.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "empty",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/empty.tsx",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 border-dashed p-12 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"flex size-10 shrink-0 items-center justify-center rounded-none bg-muted text-foreground [&_svg:not([class*='size-'])]:size-5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\n        \"cn-font-heading text-lg tracking-wider uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"mt-0.5 text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/empty",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/empty-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/example.json b/apps/v4/public/r/styles/base-sera/example.json
new file mode 100644
index 0000000000..7b79bbc69f
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/example.json
@@ -0,0 +1,13 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "example",
+  "title": "Example",
+  "files": [
+    {
+      "path": "registry/base-sera/components/example.tsx",
+      "content": "import { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground style-lyra:rounded-none style-sera:rounded-none *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "type": "registry:component"
+    }
+  ],
+  "type": "registry:component"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/field-example.json b/apps/v4/public/r/styles/base-sera/field-example.json
new file mode 100644
index 0000000000..e7ad9ea655
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/field-example.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "field-example",
+  "title": "Field",
+  "registryDependencies": [
+    "badge",
+    "checkbox",
+    "field",
+    "input",
+    "input-otp",
+    "native-select",
+    "radio-group",
+    "select",
+    "slider",
+    "switch",
+    "textarea",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/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/base-sera/components/example\"\nimport { Badge } from \"@/registry/base-sera/ui/badge\"\nimport { Checkbox } from \"@/registry/base-sera/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-sera/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/base-sera/ui/native-select\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-sera/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-sera/ui/select\"\nimport { Slider } from \"@/registry/base-sera/ui/slider\"\nimport { Switch } from \"@/registry/base-sera/ui/switch\"\nimport { Textarea } from \"@/registry/base-sera/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  const basicItems = [\n    { label: \"Choose an option\", value: null },\n    { label: \"Option 1\", value: \"option1\" },\n    { label: \"Option 2\", value: \"option2\" },\n    { label: \"Option 3\", value: \"option3\" },\n  ]\n  const countryItems = [\n    { label: \"Select your country\", value: null },\n    { label: \"United States\", value: \"us\" },\n    { label: \"United Kingdom\", value: \"uk\" },\n    { label: \"Canada\", value: \"ca\" },\n  ]\n  const timezoneItems = [\n    { label: \"Select timezone\", value: null },\n    { label: \"UTC\", value: \"utc\" },\n    { label: \"Eastern Time\", value: \"est\" },\n    { label: \"Pacific Time\", value: \"pst\" },\n  ]\n  const invalidItems = [\n    { label: \"This field has an error\", value: null },\n    { label: \"Option 1\", value: \"option1\" },\n    { label: \"Option 2\", value: \"option2\" },\n    { label: \"Option 3\", value: \"option3\" },\n  ]\n  const disabledItems = [\n    { label: \"Cannot select\", value: null },\n    { label: \"Option 1\", value: \"option1\" },\n    { label: \"Option 2\", value: \"option2\" },\n    { label: \"Option 3\", value: \"option3\" },\n  ]\n\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select items={basicItems}>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {basicItems.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select items={countryItems}>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {countryItems.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\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 items={timezoneItems}>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {timezoneItems.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select items={invalidItems}>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {invalidItems.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\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 items={disabledItems} disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {disabledItems.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\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={(value) => setVolume(value as number[])}\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={(value) => setBrightness(value as number[])}\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={(value) => setTemperature(value as number[])}\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={(value) => setPriceRange(value as number[])}\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={(value) => setColorBalance(value as number[])}\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  const basicItems = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Orange\", value: \"orange\" },\n  ]\n\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 items={basicItems}>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {basicItems.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\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"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/field.json b/apps/v4/public/r/styles/base-sera/field.json
new file mode 100644
index 0000000000..cfd59349d2
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/field.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "field",
+  "registryDependencies": [
+    "label",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/ui/field.tsx",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Label } from \"@/registry/base-sera/ui/label\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-semibold uppercase data-[variant=label]:text-xs data-[variant=legend]:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-10 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-relaxed group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-4 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-xs font-semibold tracking-wide uppercase group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal tracking-normal text-muted-foreground normal-case group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/field",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/field-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-dm-sans.json b/apps/v4/public/r/styles/base-sera/font-dm-sans.json
new file mode 100644
index 0000000000..6653f1e694
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-dm-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-dm-sans",
+  "title": "DM Sans",
+  "type": "registry:font",
+  "font": {
+    "family": "'DM Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "DM_Sans",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/dm-sans"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-eb-garamond.json b/apps/v4/public/r/styles/base-sera/font-eb-garamond.json
new file mode 100644
index 0000000000..e3de403ba0
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-eb-garamond",
+  "title": "EB Garamond",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-figtree.json b/apps/v4/public/r/styles/base-sera/font-figtree.json
new file mode 100644
index 0000000000..619b04be2b
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-figtree.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-figtree",
+  "title": "Figtree",
+  "type": "registry:font",
+  "font": {
+    "family": "'Figtree Variable', sans-serif",
+    "provider": "google",
+    "import": "Figtree",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/figtree"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-geist-mono.json b/apps/v4/public/r/styles/base-sera/font-geist-mono.json
new file mode 100644
index 0000000000..0f7a46db84
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-geist-mono.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-geist-mono",
+  "title": "Geist Mono",
+  "type": "registry:font",
+  "font": {
+    "family": "'Geist Mono Variable', monospace",
+    "provider": "google",
+    "import": "Geist_Mono",
+    "variable": "--font-mono",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/geist-mono"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-geist.json b/apps/v4/public/r/styles/base-sera/font-geist.json
new file mode 100644
index 0000000000..4f736f50f6
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-geist.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-geist",
+  "title": "Geist",
+  "type": "registry:font",
+  "font": {
+    "family": "'Geist Variable', sans-serif",
+    "provider": "google",
+    "import": "Geist",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/geist"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-dm-sans.json b/apps/v4/public/r/styles/base-sera/font-heading-dm-sans.json
new file mode 100644
index 0000000000..0ca8a27aad
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-dm-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-dm-sans",
+  "title": "DM Sans (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'DM Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "DM_Sans",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/dm-sans"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-eb-garamond.json b/apps/v4/public/r/styles/base-sera/font-heading-eb-garamond.json
new file mode 100644
index 0000000000..2f7d94b7e5
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-eb-garamond",
+  "title": "EB Garamond (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-figtree.json b/apps/v4/public/r/styles/base-sera/font-heading-figtree.json
new file mode 100644
index 0000000000..a1931b2b65
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-figtree.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-figtree",
+  "title": "Figtree (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Figtree Variable', sans-serif",
+    "provider": "google",
+    "import": "Figtree",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/figtree"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-geist-mono.json b/apps/v4/public/r/styles/base-sera/font-heading-geist-mono.json
new file mode 100644
index 0000000000..6e84ecfa45
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-geist-mono.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-geist-mono",
+  "title": "Geist Mono (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Geist Mono Variable', monospace",
+    "provider": "google",
+    "import": "Geist_Mono",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/geist-mono"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-geist.json b/apps/v4/public/r/styles/base-sera/font-heading-geist.json
new file mode 100644
index 0000000000..9da82386f5
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-geist.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-geist",
+  "title": "Geist (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Geist Variable', sans-serif",
+    "provider": "google",
+    "import": "Geist",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/geist"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-ibm-plex-sans.json b/apps/v4/public/r/styles/base-sera/font-heading-ibm-plex-sans.json
new file mode 100644
index 0000000000..3f43f8497f
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-ibm-plex-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-ibm-plex-sans",
+  "title": "IBM Plex Sans (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'IBM Plex Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "IBM_Plex_Sans",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/ibm-plex-sans"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-instrument-sans.json b/apps/v4/public/r/styles/base-sera/font-heading-instrument-sans.json
new file mode 100644
index 0000000000..7ae2a162d6
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-instrument-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-instrument-sans",
+  "title": "Instrument Sans (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Instrument Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "Instrument_Sans",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/instrument-sans"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-inter.json b/apps/v4/public/r/styles/base-sera/font-heading-inter.json
new file mode 100644
index 0000000000..25de09568a
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-inter.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-inter",
+  "title": "Inter (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Inter Variable', sans-serif",
+    "provider": "google",
+    "import": "Inter",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/inter"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-jetbrains-mono.json b/apps/v4/public/r/styles/base-sera/font-heading-jetbrains-mono.json
new file mode 100644
index 0000000000..4baaa9f941
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-jetbrains-mono.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-jetbrains-mono",
+  "title": "JetBrains Mono (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'JetBrains Mono Variable', monospace",
+    "provider": "google",
+    "import": "JetBrains_Mono",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/jetbrains-mono"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-lora.json b/apps/v4/public/r/styles/base-sera/font-heading-lora.json
new file mode 100644
index 0000000000..790db18b00
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-lora.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-lora",
+  "title": "Lora (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Lora Variable', serif",
+    "provider": "google",
+    "import": "Lora",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/lora"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-manrope.json b/apps/v4/public/r/styles/base-sera/font-heading-manrope.json
new file mode 100644
index 0000000000..fc7a5dd2d1
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-manrope.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-manrope",
+  "title": "Manrope (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Manrope Variable', sans-serif",
+    "provider": "google",
+    "import": "Manrope",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/manrope"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-merriweather.json b/apps/v4/public/r/styles/base-sera/font-heading-merriweather.json
new file mode 100644
index 0000000000..080780b294
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-merriweather.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-merriweather",
+  "title": "Merriweather (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Merriweather Variable', serif",
+    "provider": "google",
+    "import": "Merriweather",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/merriweather"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-montserrat.json b/apps/v4/public/r/styles/base-sera/font-heading-montserrat.json
new file mode 100644
index 0000000000..5a2d30d113
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-montserrat.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-montserrat",
+  "title": "Montserrat (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Montserrat Variable', sans-serif",
+    "provider": "google",
+    "import": "Montserrat",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/montserrat"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-noto-sans.json b/apps/v4/public/r/styles/base-sera/font-heading-noto-sans.json
new file mode 100644
index 0000000000..e92c056e9a
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-noto-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-noto-sans",
+  "title": "Noto Sans (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Noto Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "Noto_Sans",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/noto-sans"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-noto-serif.json b/apps/v4/public/r/styles/base-sera/font-heading-noto-serif.json
new file mode 100644
index 0000000000..b0d9967606
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-noto-serif.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-noto-serif",
+  "title": "Noto Serif (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Noto Serif Variable', serif",
+    "provider": "google",
+    "import": "Noto_Serif",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/noto-serif"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-nunito-sans.json b/apps/v4/public/r/styles/base-sera/font-heading-nunito-sans.json
new file mode 100644
index 0000000000..38bb0f2ed1
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-nunito-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-nunito-sans",
+  "title": "Nunito Sans (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Nunito Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "Nunito_Sans",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/nunito-sans"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-outfit.json b/apps/v4/public/r/styles/base-sera/font-heading-outfit.json
new file mode 100644
index 0000000000..c438086533
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-outfit.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-outfit",
+  "title": "Outfit (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Outfit Variable', sans-serif",
+    "provider": "google",
+    "import": "Outfit",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/outfit"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-oxanium.json b/apps/v4/public/r/styles/base-sera/font-heading-oxanium.json
new file mode 100644
index 0000000000..0347430744
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-oxanium.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-oxanium",
+  "title": "Oxanium (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Oxanium Variable', sans-serif",
+    "provider": "google",
+    "import": "Oxanium",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/oxanium"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-playfair-display.json b/apps/v4/public/r/styles/base-sera/font-heading-playfair-display.json
new file mode 100644
index 0000000000..0041579cc7
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-playfair-display.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-playfair-display",
+  "title": "Playfair Display (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Playfair Display Variable', serif",
+    "provider": "google",
+    "import": "Playfair_Display",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/playfair-display"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-public-sans.json b/apps/v4/public/r/styles/base-sera/font-heading-public-sans.json
new file mode 100644
index 0000000000..790ceaa123
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-public-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-public-sans",
+  "title": "Public Sans (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Public Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "Public_Sans",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/public-sans"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-raleway.json b/apps/v4/public/r/styles/base-sera/font-heading-raleway.json
new file mode 100644
index 0000000000..23c30652f1
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-raleway.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-raleway",
+  "title": "Raleway (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Raleway Variable', sans-serif",
+    "provider": "google",
+    "import": "Raleway",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/raleway"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-roboto-slab.json b/apps/v4/public/r/styles/base-sera/font-heading-roboto-slab.json
new file mode 100644
index 0000000000..172ff07f7c
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-roboto-slab.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-roboto-slab",
+  "title": "Roboto Slab (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Roboto Slab Variable', serif",
+    "provider": "google",
+    "import": "Roboto_Slab",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/roboto-slab"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-roboto.json b/apps/v4/public/r/styles/base-sera/font-heading-roboto.json
new file mode 100644
index 0000000000..d3c2aa0d6b
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-roboto.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-roboto",
+  "title": "Roboto (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Roboto Variable', sans-serif",
+    "provider": "google",
+    "import": "Roboto",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/roboto"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-source-sans-3.json b/apps/v4/public/r/styles/base-sera/font-heading-source-sans-3.json
new file mode 100644
index 0000000000..17fd3a0744
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-source-sans-3.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-source-sans-3",
+  "title": "Source Sans 3 (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Source Sans 3 Variable', sans-serif",
+    "provider": "google",
+    "import": "Source_Sans_3",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/source-sans-3"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-heading-space-grotesk.json b/apps/v4/public/r/styles/base-sera/font-heading-space-grotesk.json
new file mode 100644
index 0000000000..32bbf7d39f
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-heading-space-grotesk.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-space-grotesk",
+  "title": "Space Grotesk (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Space Grotesk Variable', sans-serif",
+    "provider": "google",
+    "import": "Space_Grotesk",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/space-grotesk"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-ibm-plex-sans.json b/apps/v4/public/r/styles/base-sera/font-ibm-plex-sans.json
new file mode 100644
index 0000000000..148c9b40b6
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-ibm-plex-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-ibm-plex-sans",
+  "title": "IBM Plex Sans",
+  "type": "registry:font",
+  "font": {
+    "family": "'IBM Plex Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "IBM_Plex_Sans",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/ibm-plex-sans"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-instrument-sans.json b/apps/v4/public/r/styles/base-sera/font-instrument-sans.json
new file mode 100644
index 0000000000..93a96875fc
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-instrument-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-instrument-sans",
+  "title": "Instrument Sans",
+  "type": "registry:font",
+  "font": {
+    "family": "'Instrument Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "Instrument_Sans",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/instrument-sans"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-inter.json b/apps/v4/public/r/styles/base-sera/font-inter.json
new file mode 100644
index 0000000000..bab7e82d62
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-inter.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-inter",
+  "title": "Inter",
+  "type": "registry:font",
+  "font": {
+    "family": "'Inter Variable', sans-serif",
+    "provider": "google",
+    "import": "Inter",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/inter"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-jetbrains-mono.json b/apps/v4/public/r/styles/base-sera/font-jetbrains-mono.json
new file mode 100644
index 0000000000..2e5daf5916
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-jetbrains-mono.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-jetbrains-mono",
+  "title": "JetBrains Mono",
+  "type": "registry:font",
+  "font": {
+    "family": "'JetBrains Mono Variable', monospace",
+    "provider": "google",
+    "import": "JetBrains_Mono",
+    "variable": "--font-mono",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/jetbrains-mono"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-lora.json b/apps/v4/public/r/styles/base-sera/font-lora.json
new file mode 100644
index 0000000000..3fb6dabf90
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-lora.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-lora",
+  "title": "Lora",
+  "type": "registry:font",
+  "font": {
+    "family": "'Lora Variable', serif",
+    "provider": "google",
+    "import": "Lora",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/lora"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-manrope.json b/apps/v4/public/r/styles/base-sera/font-manrope.json
new file mode 100644
index 0000000000..d11ab4b5bb
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-manrope.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-manrope",
+  "title": "Manrope",
+  "type": "registry:font",
+  "font": {
+    "family": "'Manrope Variable', sans-serif",
+    "provider": "google",
+    "import": "Manrope",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/manrope"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-merriweather.json b/apps/v4/public/r/styles/base-sera/font-merriweather.json
new file mode 100644
index 0000000000..587a03ac9e
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-merriweather.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-merriweather",
+  "title": "Merriweather",
+  "type": "registry:font",
+  "font": {
+    "family": "'Merriweather Variable', serif",
+    "provider": "google",
+    "import": "Merriweather",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/merriweather"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-montserrat.json b/apps/v4/public/r/styles/base-sera/font-montserrat.json
new file mode 100644
index 0000000000..fbc12486c2
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-montserrat.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-montserrat",
+  "title": "Montserrat",
+  "type": "registry:font",
+  "font": {
+    "family": "'Montserrat Variable', sans-serif",
+    "provider": "google",
+    "import": "Montserrat",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/montserrat"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-noto-sans.json b/apps/v4/public/r/styles/base-sera/font-noto-sans.json
new file mode 100644
index 0000000000..e63fdd05b1
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-noto-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-noto-sans",
+  "title": "Noto Sans",
+  "type": "registry:font",
+  "font": {
+    "family": "'Noto Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "Noto_Sans",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/noto-sans"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-noto-serif.json b/apps/v4/public/r/styles/base-sera/font-noto-serif.json
new file mode 100644
index 0000000000..659b749166
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-noto-serif.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-noto-serif",
+  "title": "Noto Serif",
+  "type": "registry:font",
+  "font": {
+    "family": "'Noto Serif Variable', serif",
+    "provider": "google",
+    "import": "Noto_Serif",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/noto-serif"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-nunito-sans.json b/apps/v4/public/r/styles/base-sera/font-nunito-sans.json
new file mode 100644
index 0000000000..fae127aedd
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-nunito-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-nunito-sans",
+  "title": "Nunito Sans",
+  "type": "registry:font",
+  "font": {
+    "family": "'Nunito Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "Nunito_Sans",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/nunito-sans"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-outfit.json b/apps/v4/public/r/styles/base-sera/font-outfit.json
new file mode 100644
index 0000000000..59f7b0627f
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-outfit.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-outfit",
+  "title": "Outfit",
+  "type": "registry:font",
+  "font": {
+    "family": "'Outfit Variable', sans-serif",
+    "provider": "google",
+    "import": "Outfit",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/outfit"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-oxanium.json b/apps/v4/public/r/styles/base-sera/font-oxanium.json
new file mode 100644
index 0000000000..384c5d4206
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-oxanium.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-oxanium",
+  "title": "Oxanium",
+  "type": "registry:font",
+  "font": {
+    "family": "'Oxanium Variable', sans-serif",
+    "provider": "google",
+    "import": "Oxanium",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/oxanium"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-playfair-display.json b/apps/v4/public/r/styles/base-sera/font-playfair-display.json
new file mode 100644
index 0000000000..efaae28a82
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-playfair-display.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-playfair-display",
+  "title": "Playfair Display",
+  "type": "registry:font",
+  "font": {
+    "family": "'Playfair Display Variable', serif",
+    "provider": "google",
+    "import": "Playfair_Display",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/playfair-display"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-public-sans.json b/apps/v4/public/r/styles/base-sera/font-public-sans.json
new file mode 100644
index 0000000000..dfc5b3ba8f
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-public-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-public-sans",
+  "title": "Public Sans",
+  "type": "registry:font",
+  "font": {
+    "family": "'Public Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "Public_Sans",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/public-sans"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-raleway.json b/apps/v4/public/r/styles/base-sera/font-raleway.json
new file mode 100644
index 0000000000..fe820638d9
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-raleway.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-raleway",
+  "title": "Raleway",
+  "type": "registry:font",
+  "font": {
+    "family": "'Raleway Variable', sans-serif",
+    "provider": "google",
+    "import": "Raleway",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/raleway"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-roboto-slab.json b/apps/v4/public/r/styles/base-sera/font-roboto-slab.json
new file mode 100644
index 0000000000..d18a6247ee
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-roboto-slab.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-roboto-slab",
+  "title": "Roboto Slab",
+  "type": "registry:font",
+  "font": {
+    "family": "'Roboto Slab Variable', serif",
+    "provider": "google",
+    "import": "Roboto_Slab",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/roboto-slab"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-roboto.json b/apps/v4/public/r/styles/base-sera/font-roboto.json
new file mode 100644
index 0000000000..6b9f7765ef
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-roboto.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-roboto",
+  "title": "Roboto",
+  "type": "registry:font",
+  "font": {
+    "family": "'Roboto Variable', sans-serif",
+    "provider": "google",
+    "import": "Roboto",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/roboto"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-source-sans-3.json b/apps/v4/public/r/styles/base-sera/font-source-sans-3.json
new file mode 100644
index 0000000000..0684a20da4
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-source-sans-3.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-source-sans-3",
+  "title": "Source Sans 3",
+  "type": "registry:font",
+  "font": {
+    "family": "'Source Sans 3 Variable', sans-serif",
+    "provider": "google",
+    "import": "Source_Sans_3",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/source-sans-3"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/font-space-grotesk.json b/apps/v4/public/r/styles/base-sera/font-space-grotesk.json
new file mode 100644
index 0000000000..d77d6dccc3
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/font-space-grotesk.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-space-grotesk",
+  "title": "Space Grotesk",
+  "type": "registry:font",
+  "font": {
+    "family": "'Space Grotesk Variable', sans-serif",
+    "provider": "google",
+    "import": "Space_Grotesk",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/space-grotesk"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/form.json b/apps/v4/public/r/styles/base-sera/form.json
new file mode 100644
index 0000000000..29dda515fb
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/form.json
@@ -0,0 +1,5 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "form",
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/hover-card-example.json b/apps/v4/public/r/styles/base-sera/hover-card-example.json
new file mode 100644
index 0000000000..2075e9d0e1
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/hover-card-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hover-card-example",
+  "title": "Hover Card",
+  "registryDependencies": [
+    "button",
+    "dialog",
+    "hover-card",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/hover-card-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-sera/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/base-sera/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\n  \"inline-start\",\n  \"left\",\n  \"top\",\n  \"bottom\",\n  \"right\",\n  \"inline-end\",\n] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap items-center justify-center gap-2\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side}>\n            <HoverCardTrigger\n              delay={100}\n              closeDelay={100}\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </HoverCardTrigger>\n            <HoverCardContent side={side}>\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side.replace(\"-\", \" \")} side\n                  of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard>\n            <HoverCardTrigger\n              delay={100}\n              closeDelay={100}\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Hover me\n            </HoverCardTrigger>\n            <HoverCardContent>\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/hover-card.json b/apps/v4/public/r/styles/base-sera/hover-card.json
new file mode 100644
index 0000000000..23399b835f
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/hover-card.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hover-card",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/hover-card.tsx",
+      "content": "\"use client\"\n\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {\n  return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n  return (\n    <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 4,\n  ...props\n}: PreviewCardPrimitive.Popup.Props &\n  Pick<\n    PreviewCardPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PreviewCardPrimitive.Popup\n          data-slot=\"hover-card-content\"\n          className={cn(\n            \"z-50 w-72 origin-(--transform-origin) bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/hover-card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/hover-card-example.tsx",
+      "api": "https://base-ui.com/react/components/hover-card.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/index.json b/apps/v4/public/r/styles/base-sera/index.json
new file mode 100644
index 0000000000..94f1c90de2
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/index.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "index",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "@base-ui/react"
+  ],
+  "devDependencies": [
+    "tw-animate-css",
+    "shadcn"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {},
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@import \"shadcn/tailwind.css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  },
+  "type": "registry:style"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/input-example.json b/apps/v4/public/r/styles/base-sera/input-example.json
new file mode 100644
index 0000000000..64d6fe4d02
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/input-example.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-example",
+  "title": "Input",
+  "registryDependencies": [
+    "button",
+    "field",
+    "input",
+    "native-select",
+    "select",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/input-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-sera/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-sera/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"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/input-group-example.json b/apps/v4/public/r/styles/base-sera/input-group-example.json
new file mode 100644
index 0000000000..710f0bb026
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/input-group-example.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-group-example",
+  "title": "Input Group",
+  "registryDependencies": [
+    "button",
+    "button-group",
+    "card",
+    "dropdown-menu",
+    "field",
+    "input",
+    "input-group",
+    "kbd",
+    "popover",
+    "spinner",
+    "textarea",
+    "tooltip",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/input-group-example.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/base-sera/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-sera/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-sera/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/base-sera/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/base-sera/ui/popover\"\nimport { Spinner } from \"@/registry/base-sera/ui/spinner\"\nimport { Textarea } from \"@/registry/base-sera/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-sera/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n                remixicon=\"RiEyeOffLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                remixicon=\"RiMicLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n                remixicon=\"RiStarLine\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"pl-1 text-muted-foreground\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n                remixicon=\"RiSparklingLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                    remixicon=\"RiMailLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                    remixicon=\"RiExternalLinkLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                  remixicon=\"RiRefreshLine\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/input-group.json b/apps/v4/public/r/styles/base-sera/input-group.json
new file mode 100644
index 0000000000..74625dd3f7
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/input-group.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-group",
+  "registryDependencies": [
+    "button",
+    "input",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/ui/input-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport { Textarea } from \"@/registry/base-sera/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-10 w-full min-w-0 items-center rounded-none border border-transparent border-b-input bg-transparent transition-[color,border-color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-none has-data-[align=block-start]:rounded-none has-[[data-slot=input-group-control]:focus-visible]:border-b-ring has-[[data-slot][aria-invalid=true]]:border-b-destructive has-[textarea]:rounded-none has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:border-b-destructive/50 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-none **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"order-first\",\n        \"inline-end\": \"order-last\",\n        \"block-start\":\n          \"order-first w-full justify-start pt-3 group-has-[>input]/input-group:pt-3.5 [.border-b]:pb-3.5\",\n        \"block-end\":\n          \"order-last w-full justify-start pb-3 group-has-[>input]/input-group:pb-3.5 [.border-t]:pt-3.5\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"flex items-center gap-2 rounded-none text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-none px-1.5 text-xs [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 text-xs has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\"\n  }) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 border-0 bg-transparent ring-0 group-has-[>[data-align=inline-end]]/input-group:pr-2 group-has-[>[data-align=inline-start]]/input-group:pl-2 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none border-0 bg-transparent py-2.5 ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/input-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-group-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/input-otp-example.json b/apps/v4/public/r/styles/base-sera/input-otp-example.json
new file mode 100644
index 0000000000..81bc1b5195
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/input-otp-example.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-example",
+  "title": "Input OTP",
+  "registryDependencies": [
+    "button",
+    "card",
+    "field",
+    "input-otp",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/input-otp-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-sera/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-sera/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-sera/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" 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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\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    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-sm text-muted-foreground\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"underline underline-offset-4 transition-colors hover:text-primary\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/input-otp.json b/apps/v4/public/r/styles/base-sera/input-otp.json
new file mode 100644
index 0000000000..ddfc770a7a
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/input-otp.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp",
+  "dependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/ui/input-otp.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\"disabled:cursor-not-allowed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\n        \"flex items-center gap-1 rounded-none has-aria-invalid:border-b-destructive dark:has-aria-invalid:border-b-destructive/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"relative flex size-10 items-center justify-center border border-transparent border-b-input bg-transparent text-sm transition-[color,border-color] outline-none first:rounded-none last:rounded-none aria-invalid:border-b-destructive data-[active=true]:z-10 data-[active=true]:border-b-ring dark:aria-invalid:border-b-destructive/50\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"flex items-center [&_svg:not([class*='size-'])]:size-4\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n        remixicon=\"RiSubtractLine\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/input-otp",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-otp-example.tsx",
+      "api": "https://input-otp.rodz.dev"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/input.json b/apps/v4/public/r/styles/base-sera/input.json
new file mode 100644
index 0000000000..8e023264e2
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/input.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/input.tsx",
+      "content": "import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-10 w-full min-w-0 border border-transparent border-b-input bg-transparent px-0 py-1 text-base transition-[color,border-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-b-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive md:text-sm dark:aria-invalid:border-b-destructive/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/input",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/item-example.json b/apps/v4/public/r/styles/base-sera/item-example.json
new file mode 100644
index 0000000000..141002f2fc
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/item-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "item-example",
+  "title": "Item",
+  "registryDependencies": [
+    "button",
+    "item",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/item-example.tsx",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-sera/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/item.json b/apps/v4/public/r/styles/base-sera/item.json
new file mode 100644
index 0000000000..1559be6e58
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/item.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "item",
+  "registryDependencies": [
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/ui/item.tsx",
+      "content": "import * 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-sera/lib/utils\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"group/item flex w-full flex-wrap items-center rounded-none border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"border-transparent bg-muted/50\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-3.5 px-3.5 py-3\",\n        xs: \"gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & VariantProps<typeof itemVariants>) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(itemVariants({ variant, size, className })),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"item\",\n      variant,\n      size,\n    },\n  })\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-none group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 group-data-[size=xs]/item:rounded-none [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0.5 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"cn-font-heading line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-semibold tracking-wide underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"line-clamp-2 text-left text-sm leading-relaxed font-normal text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/item",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/item-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/kbd-example.json b/apps/v4/public/r/styles/base-sera/kbd-example.json
new file mode 100644
index 0000000000..6f416e2f0a
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/kbd-example.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "kbd-example",
+  "title": "Kbd",
+  "registryDependencies": [
+    "button",
+    "input-group",
+    "kbd",
+    "tooltip",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/kbd-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-sera/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/base-sera/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-sera/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n  return (\n    <ExampleWrapper>\n      <KbdBasic />\n      <KbdModifierKeys />\n      <KbdGroupExample />\n      <KbdArrowKeys />\n      <KbdWithIcons />\n      <KbdWithIconsAndText />\n      <KbdInInputGroup />\n      <KbdInTooltip />\n      <KbdWithSamp />\n    </ExampleWrapper>\n  )\n}\n\nfunction KbdBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>⌘K</Kbd>\n        <Kbd>Ctrl + B</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdModifierKeys() {\n  return (\n    <Example title=\"Modifier Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>⌘</Kbd>\n        <Kbd>C</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdGroupExample() {\n  return (\n    <Example title=\"KbdGroup\">\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdArrowKeys() {\n  return (\n    <Example title=\"Arrow Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>↑</Kbd>\n        <Kbd>↓</Kbd>\n        <Kbd>←</Kbd>\n        <Kbd>→</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n            remixicon=\"RiLoaderLine\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            remixicon=\"RiArrowLeftLine\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdWithIconsAndText() {\n  return (\n    <Example title=\"With Icons and Text\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            remixicon=\"RiArrowLeftLine\"\n          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n            remixicon=\"RiLoaderLine\"\n          />\n          Voice Enabled\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdInInputGroup() {\n  return (\n    <Example title=\"InputGroup\">\n      <InputGroup>\n        <InputGroupInput />\n        <InputGroupAddon>\n          <Kbd>Space</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n\nfunction KbdInTooltip() {\n  return (\n    <Example title=\"Tooltip\">\n      <Tooltip>\n        <TooltipTrigger render={<Button size=\"icon-sm\" variant=\"outline\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n            phosphor=\"FloppyDiskIcon\"\n            remixicon=\"RiSaveLine\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction KbdWithSamp() {\n  return (\n    <Example title=\"With samp\">\n      <Kbd>\n        <samp>File</samp>\n      </Kbd>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/kbd.json b/apps/v4/public/r/styles/base-sera/kbd.json
new file mode 100644
index 0000000000..dd529f3b8f
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/kbd.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "kbd",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/kbd.tsx",
+      "content": "import { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"pointer-events-none inline-flex h-5.5 w-fit min-w-5.5 items-center justify-center gap-1 rounded-none bg-muted px-1.5 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=input-group]:bg-input in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/kbd",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/kbd-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/label-example.json b/apps/v4/public/r/styles/base-sera/label-example.json
new file mode 100644
index 0000000000..74324dca89
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/label-example.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "label-example",
+  "title": "Label",
+  "registryDependencies": [
+    "checkbox",
+    "field",
+    "input",
+    "label",
+    "textarea",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/label-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Checkbox } from \"@/registry/base-sera/ui/checkbox\"\nimport { Field } from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport { Label } from \"@/registry/base-sera/ui/label\"\nimport { Textarea } from \"@/registry/base-sera/ui/textarea\"\n\nexport default function LabelExample() {\n  return (\n    <ExampleWrapper>\n      <LabelWithCheckbox />\n      <LabelWithInput />\n      <LabelDisabled />\n      <LabelWithTextarea />\n    </ExampleWrapper>\n  )\n}\n\nfunction LabelWithCheckbox() {\n  return (\n    <Example title=\"With Checkbox\">\n      <Field orientation=\"horizontal\">\n        <Checkbox id=\"label-demo-terms\" />\n        <Label htmlFor=\"label-demo-terms\">Accept terms and conditions</Label>\n      </Field>\n    </Example>\n  )\n}\n\nfunction LabelWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Field>\n        <Label htmlFor=\"label-demo-username\">Username</Label>\n        <Input id=\"label-demo-username\" placeholder=\"Username\" />\n      </Field>\n    </Example>\n  )\n}\n\nfunction LabelDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field data-disabled={true}>\n        <Label htmlFor=\"label-demo-disabled\">Disabled</Label>\n        <Input id=\"label-demo-disabled\" placeholder=\"Disabled\" disabled />\n      </Field>\n    </Example>\n  )\n}\n\nfunction LabelWithTextarea() {\n  return (\n    <Example title=\"With Textarea\">\n      <Field>\n        <Label htmlFor=\"label-demo-message\">Message</Label>\n        <Textarea id=\"label-demo-message\" placeholder=\"Message\" />\n      </Field>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/label.json b/apps/v4/public/r/styles/base-sera/label.json
new file mode 100644
index 0000000000..deb5b17cbb
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/label.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "label",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/label.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction Label({ className, ...props }: React.ComponentProps<\"label\">) {\n  return (\n    <label\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-xs leading-relaxed font-semibold tracking-wide uppercase select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[slot=checkbox]:text-sm peer-data-[slot=checkbox]:font-medium peer-data-[slot=checkbox]:tracking-normal peer-data-[slot=checkbox]:normal-case peer-data-[slot=radio]:text-sm peer-data-[slot=radio]:font-medium peer-data-[slot=radio]:tracking-normal peer-data-[slot=radio]:normal-case\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/label",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/label-example.tsx",
+      "api": "https://base-ui.com/react/components/label.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/login-01.json b/apps/v4/public/r/styles/base-sera/login-01.json
new file mode 100644
index 0000000000..7963b9a6c3
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/login-01.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-01",
+  "title": "Login 01",
+  "description": "A simple login form.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "field"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/login-01/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/base-sera/blocks/login-01/components/login-form\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/login-01/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-sera/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Login with Google\n                </Button>\n                <FieldDescription className=\"text-center\">\n                  Don&apos;t have an account? <a href=\"#\">Sign up</a>\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/login-02.json b/apps/v4/public/r/styles/base-sera/login-02.json
new file mode 100644
index 0000000000..34d38e0cf2
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/login-02.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-02",
+  "title": "Login 02",
+  "description": "A two column login page with a cover image.",
+  "registryDependencies": [
+    "button",
+    "input",
+    "label",
+    "field"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/login-02/page.tsx",
+      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-sera/blocks/login-02/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/login-02/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator>Or continue with</FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/login-03.json b/apps/v4/public/r/styles/base-sera/login-03.json
new file mode 100644
index 0000000000..cbdf263a21
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/login-03.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-03",
+  "title": "Login 03",
+  "description": "A login page with a muted background color.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "field"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/login-03/page.tsx",
+      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-sera/blocks/login-03/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/login-03/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-sera/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card>\n        <CardHeader className=\"text-center\">\n          <CardTitle className=\"text-xl\">Welcome back</CardTitle>\n          <CardDescription>\n            Login with your Apple or Google account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  Login with Apple\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  Login with Google\n                </Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n                <FieldDescription className=\"text-center\">\n                  Don&apos;t have an account? <a href=\"#\">Sign up</a>\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/login-04.json b/apps/v4/public/r/styles/base-sera/login-04.json
new file mode 100644
index 0000000000..1ac892d56a
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/login-04.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-04",
+  "title": "Login 04",
+  "description": "A login page with form and image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "field"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/login-04/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/base-sera/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/login-04/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-sera/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-balance text-muted-foreground\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Don&apos;t have an account? <a href=\"#\">Sign up</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/login-05.json b/apps/v4/public/r/styles/base-sera/login-05.json
new file mode 100644
index 0000000000..a2346bdb74
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/login-05.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-05",
+  "title": "Login 05",
+  "description": "A simple email-only login page.",
+  "registryDependencies": [
+    "button",
+    "input",
+    "label",
+    "field"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/login-05/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/base-sera/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/login-05/components/login-form.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <FieldGroup>\n          <div className=\"flex flex-col items-center gap-2 text-center\">\n            <a\n              href=\"#\"\n              className=\"flex flex-col items-center gap-2 font-medium\"\n            >\n              <div className=\"flex size-8 items-center justify-center rounded-md\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-6\"\n                />\n              </div>\n              <span className=\"sr-only\">Acme Inc.</span>\n            </a>\n            <h1 className=\"text-xl font-bold\">Welcome to Acme Inc.</h1>\n            <FieldDescription>\n              Don&apos;t have an account? <a href=\"#\">Sign up</a>\n            </FieldDescription>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </Field>\n          <Field>\n            <Button type=\"submit\">Login</Button>\n          </Field>\n          <FieldSeparator>Or</FieldSeparator>\n          <Field className=\"grid gap-4 sm:grid-cols-2\">\n            <Button variant=\"outline\" type=\"button\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              Continue with Apple\n            </Button>\n            <Button variant=\"outline\" type=\"button\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              Continue with Google\n            </Button>\n          </Field>\n        </FieldGroup>\n      </form>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/menubar-example.json b/apps/v4/public/r/styles/base-sera/menubar-example.json
new file mode 100644
index 0000000000..eca5d2ad47
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/menubar-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "menubar-example",
+  "title": "Menubar",
+  "registryDependencies": [
+    "button",
+    "dialog",
+    "menubar",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/menubar-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-sera/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarLabel,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/base-sera/ui/menubar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function MenubarExample() {\n  return (\n    <ExampleWrapper>\n      <MenubarBasic />\n      <MenubarWithSubmenu />\n      <MenubarSides />\n      <MenubarWithCheckboxes />\n      <MenubarWithRadio />\n      <MenubarWithIcons />\n      <MenubarWithShortcuts />\n      <MenubarFormat />\n      <MenubarInsert />\n      <MenubarDestructive />\n      <MenubarInDialog />\n      <MenubarWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction MenubarBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              New Window <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem disabled>New Incognito Window</MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>Cut</MenubarItem>\n            <MenubarItem>Copy</MenubarItem>\n            <MenubarItem>Paste</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Menubar key={side}>\n            <MenubarMenu>\n              <MenubarTrigger className=\"capitalize\">\n                {side.replace(\"-\", \" \")}\n              </MenubarTrigger>\n              <MenubarContent side={side}>\n                <MenubarGroup>\n                  <MenubarItem>New Tab</MenubarItem>\n                  <MenubarItem>New Window</MenubarItem>\n                  <MenubarItem>New Incognito Window</MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction MenubarWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>Share</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Email link</MenubarItem>\n                <MenubarItem>Messages</MenubarItem>\n                <MenubarItem>Notes</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger>Find</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Find...</MenubarItem>\n                <MenubarItem>Find Next</MenubarItem>\n                <MenubarItem>Find Previous</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>Cut</MenubarItem>\n            <MenubarItem>Copy</MenubarItem>\n            <MenubarItem>Paste</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-64\">\n            <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>\n              Always Show Full URLs\n            </MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarItem inset>\n              Reload <MenubarShortcut>⌘R</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem disabled inset>\n              Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithRadio() {\n  const [user, setUser] = React.useState(\"benoit\")\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Radio\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Profiles</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={user} onValueChange={setUser}>\n              <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n              <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n              <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            </MenubarRadioGroup>\n            <MenubarSeparator />\n            <MenubarItem inset>Edit...</MenubarItem>\n            <MenubarItem inset>Add Profile...</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Theme</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n              <MenubarRadioItem value=\"light\">Light</MenubarRadioItem>\n              <MenubarRadioItem value=\"dark\">Dark</MenubarRadioItem>\n              <MenubarRadioItem value=\"system\">System</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              Open Folder\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n                remixicon=\"RiSaveLine\"\n              />\n              Save <MenubarShortcut>⌘S</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>More</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                  remixicon=\"RiLoaderLine\"\n                />\n                Settings\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                  remixicon=\"RiLoaderLine\"\n                />\n                Help\n              </MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                  remixicon=\"RiLoaderLine\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              New Window <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              Cut <MenubarShortcut>⌘X</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Copy <MenubarShortcut>⌘C</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Paste <MenubarShortcut>⌘V</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarFormat() {\n  return (\n    <Example title=\"Format\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"BoldIcon\"\n                tabler=\"IconBold\"\n                hugeicons=\"TextBoldIcon\"\n                phosphor=\"TextBIcon\"\n                remixicon=\"RiBold\"\n              />\n              Bold <MenubarShortcut>⌘B</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"ItalicIcon\"\n                tabler=\"IconItalic\"\n                hugeicons=\"TextItalicIcon\"\n                phosphor=\"TextItalicIcon\"\n                remixicon=\"RiItalic\"\n              />\n              Italic <MenubarShortcut>⌘I</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"UnderlineIcon\"\n                tabler=\"IconUnderline\"\n                hugeicons=\"TextUnderlineIcon\"\n                phosphor=\"TextUnderlineIcon\"\n                remixicon=\"RiUnderline\"\n              />\n              Underline <MenubarShortcut>⌘U</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarItem inset>Zoom In</MenubarItem>\n            <MenubarItem inset>Zoom Out</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInsert() {\n  return (\n    <Example title=\"Insert\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Insert</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                  phosphor=\"ImageIcon\"\n                  remixicon=\"RiImageLine\"\n                />\n                Media\n              </MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Image</MenubarItem>\n                <MenubarItem>Video</MenubarItem>\n                <MenubarItem>Audio</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"LinkIcon\"\n                tabler=\"IconLink\"\n                hugeicons=\"LinkIcon\"\n                phosphor=\"LinkIcon\"\n                remixicon=\"RiLinksLine\"\n              />\n              Link <MenubarShortcut>⌘K</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"TableIcon\"\n                tabler=\"IconTable\"\n                hugeicons=\"TableIcon\"\n                phosphor=\"TableIcon\"\n                remixicon=\"RiTableLine\"\n              />\n              Table\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Tools</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n              />\n              Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"CheckIcon\"\n                tabler=\"IconCheck\"\n                hugeicons=\"Tick02Icon\"\n                phosphor=\"CheckIcon\"\n                remixicon=\"RiCheckLine\"\n              />\n              Spell Check\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarDestructive() {\n  return (\n    <Example title=\"Destructive\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent className=\"w-40\">\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              Open Folder\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Account</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign out\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Menubar Example</DialogTitle>\n            <DialogDescription>\n              Use the menubar below to see the menu options.\n            </DialogDescription>\n          </DialogHeader>\n          <Menubar>\n            <MenubarMenu>\n              <MenubarTrigger>File</MenubarTrigger>\n              <MenubarContent>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </MenubarItem>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </MenubarItem>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </MenubarItem>\n                <MenubarSeparator />\n                <MenubarSub>\n                  <MenubarSubTrigger>More Options</MenubarSubTrigger>\n                  <MenubarSubContent>\n                    <MenubarItem>Save Page...</MenubarItem>\n                    <MenubarItem>Create Shortcut...</MenubarItem>\n                    <MenubarItem>Name Window...</MenubarItem>\n                    <MenubarSeparator />\n                    <MenubarItem>Developer Tools</MenubarItem>\n                  </MenubarSubContent>\n                </MenubarSub>\n                <MenubarSeparator />\n                <MenubarItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </MenubarItem>\n              </MenubarContent>\n            </MenubarMenu>\n            <MenubarMenu>\n              <MenubarTrigger>Edit</MenubarTrigger>\n              <MenubarContent>\n                <MenubarItem>\n                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n                </MenubarItem>\n                <MenubarItem>\n                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n                </MenubarItem>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction MenubarWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarGroup>\n              <MenubarLabel>Actions</MenubarLabel>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </MenubarItem>\n              <MenubarItem inset>Paste</MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarLabel inset>Appearance</MenubarLabel>\n              <MenubarCheckboxItem\n                inset\n                checked={showBookmarks}\n                onCheckedChange={setShowBookmarks}\n              >\n                Bookmarks\n              </MenubarCheckboxItem>\n              <MenubarCheckboxItem\n                inset\n                checked={showUrls}\n                onCheckedChange={setShowUrls}\n              >\n                Full URLs\n              </MenubarCheckboxItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarLabel inset>Theme</MenubarLabel>\n              <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n                <MenubarRadioItem inset value=\"light\">\n                  Light\n                </MenubarRadioItem>\n                <MenubarRadioItem inset value=\"dark\">\n                  Dark\n                </MenubarRadioItem>\n                <MenubarRadioItem inset value=\"system\">\n                  System\n                </MenubarRadioItem>\n              </MenubarRadioGroup>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger inset>More Options</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Save Page...</MenubarItem>\n                  <MenubarItem>Create Shortcut...</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/menubar.json b/apps/v4/public/r/styles/base-sera/menubar.json
new file mode 100644
index 0000000000..b5f0d7eb64
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/menubar.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "menubar",
+  "registryDependencies": [
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/ui/menubar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-10 items-center rounded-none border p-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {\n  return <DropdownMenu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuGroup>) {\n  return <DropdownMenuGroup data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPortal>) {\n  return <DropdownMenuPortal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuTrigger>) {\n  return (\n    <DropdownMenuTrigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"flex items-center rounded-none px-2 py-0.75 text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"menubar-content\"\n      align={align}\n      alignOffset={alignOffset}\n      sideOffset={sideOffset}\n      className={cn(\n        \"cn-menu-target cn-menu-translucent min-w-48 rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuItem>) {\n  return (\n    <DropdownMenuItem\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/menubar-item gap-2.5 rounded-none px-3 py-2 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-3 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4\">\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {\n  return <DropdownMenuRadioGroup data-slot=\"menubar-radio-group\" {...props} />\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: MenuPrimitive.RadioItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-3 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4\">\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuLabel> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuLabel\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-3.5 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase data-inset:pl-9.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSeparator>) {\n  return (\n    <DropdownMenuSeparator\n      data-slot=\"menubar-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuShortcut>) {\n  return (\n    <DropdownMenuShortcut\n      data-slot=\"menubar-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSub>) {\n  return <DropdownMenuSub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuSubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"gap-2 rounded-none px-3 py-2 text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubContent>) {\n  return (\n    <DropdownMenuSubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"cn-menu-target cn-menu-translucent min-w-32 rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/menubar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/menubar-example.tsx",
+      "api": "https://base-ui.com/react/components/menubar.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/native-select-example.json b/apps/v4/public/r/styles/base-sera/native-select-example.json
new file mode 100644
index 0000000000..54fc041561
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/native-select-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "native-select-example",
+  "title": "Native Select",
+  "registryDependencies": [
+    "field",
+    "native-select",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/native-select-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/base-sera/ui/field\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/base-sera/ui/native-select\"\n\nexport default function NativeSelectExample() {\n  return (\n    <ExampleWrapper>\n      <NativeSelectBasic />\n      <NativeSelectWithGroups />\n      <NativeSelectSizes />\n      <NativeSelectWithField />\n      <NativeSelectDisabled />\n      <NativeSelectInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction NativeSelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <NativeSelect>\n        <NativeSelectOption value=\"\">Select a fruit</NativeSelectOption>\n        <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n        <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n        <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n        <NativeSelectOption value=\"grapes\" disabled>\n          Grapes\n        </NativeSelectOption>\n        <NativeSelectOption value=\"pineapple\">Pineapple</NativeSelectOption>\n      </NativeSelect>\n    </Example>\n  )\n}\n\nfunction NativeSelectWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <NativeSelect>\n        <NativeSelectOption value=\"\">Select a food</NativeSelectOption>\n        <NativeSelectOptGroup label=\"Fruits\">\n          <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n          <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n          <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n        </NativeSelectOptGroup>\n        <NativeSelectOptGroup label=\"Vegetables\">\n          <NativeSelectOption value=\"carrot\">Carrot</NativeSelectOption>\n          <NativeSelectOption value=\"broccoli\">Broccoli</NativeSelectOption>\n          <NativeSelectOption value=\"spinach\">Spinach</NativeSelectOption>\n        </NativeSelectOptGroup>\n      </NativeSelect>\n    </Example>\n  )\n}\n\nfunction NativeSelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <NativeSelect size=\"sm\">\n          <NativeSelectOption value=\"\">Select a fruit</NativeSelectOption>\n          <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n          <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n          <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n        </NativeSelect>\n        <NativeSelect size=\"default\">\n          <NativeSelectOption value=\"\">Select a fruit</NativeSelectOption>\n          <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n          <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n          <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction NativeSelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n        <NativeSelect id=\"native-select-country\">\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          <NativeSelectOption value=\"au\">Australia</NativeSelectOption>\n        </NativeSelect>\n        <FieldDescription>Select your country of residence.</FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction NativeSelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <NativeSelect disabled>\n        <NativeSelectOption value=\"\">Disabled</NativeSelectOption>\n        <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n        <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n        <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n      </NativeSelect>\n    </Example>\n  )\n}\n\nfunction NativeSelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <NativeSelect aria-invalid=\"true\">\n        <NativeSelectOption value=\"\">Error state</NativeSelectOption>\n        <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n        <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n        <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n      </NativeSelect>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/native-select.json b/apps/v4/public/r/styles/base-sera/native-select.json
new file mode 100644
index 0000000000..c39cafcc4c
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/native-select.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "native-select",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/native-select.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"h-10 w-full min-w-0 appearance-none rounded-none border border-transparent border-b-input bg-transparent py-2 pr-8 pl-0 text-sm transition-[color,border-color] outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-b-ring disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-b-destructive data-[size=sm]:h-9 dark:aria-invalid:border-b-destructive/50\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"pointer-events-none absolute top-1/2 right-0 size-4 -translate-y-1/2 text-muted-foreground select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({\n  className,\n  ...props\n}: React.ComponentProps<\"option\">) {\n  return (\n    <option\n      data-slot=\"native-select-option\"\n      className={cn(\"bg-[Canvas] text-[CanvasText]\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(\"bg-[Canvas] text-[CanvasText]\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/native-select",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/native-select-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/navigation-menu-example.json b/apps/v4/public/r/styles/base-sera/navigation-menu-example.json
new file mode 100644
index 0000000000..30ab42a87b
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/navigation-menu-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "navigation-menu-example",
+  "title": "Navigation Menu",
+  "registryDependencies": [
+    "button",
+    "dialog",
+    "navigation-menu",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/navigation-menu-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/base-sera/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuBasic />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    Backlog\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    To Do\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    Done\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              render={<Link href=\"/docs\" />}\n              className={navigationMenuTriggerStyle()}\n            >\n              Documentation\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink render={<Link href={href} />}>\n        <div className=\"flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n          <div className=\"leading-none font-medium\">{title}</div>\n          <div className=\"line-clamp-2 text-muted-foreground\">{children}</div>\n        </div>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/navigation-menu.json b/apps/v4/public/r/styles/base-sera/navigation-menu.json
new file mode 100644
index 0000000000..2e837b8ad1
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/navigation-menu.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "navigation-menu",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/navigation-menu.tsx",
+      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  align = \"start\",\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props &\n  Pick<NavigationMenuPrimitive.Positioner.Props, \"align\">) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPositioner align={align} />\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"group flex flex-1 list-none items-center justify-center gap-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-none px-4.5 py-2.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Content.Props) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-2.5 pr-3 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow-md group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuPositioner({\n  className,\n  side = \"bottom\",\n  sideOffset = 8,\n  align = \"start\",\n  alignOffset = 0,\n  ...props\n}: NavigationMenuPrimitive.Positioner.Props) {\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          \"isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0\",\n          className\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0\">\n          <NavigationMenuPrimitive.Viewport className=\"relative size-full overflow-hidden\" />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Link.Props) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"flex items-center gap-1.5 rounded-none p-3 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none data-[active=true]:bg-muted/50 data-[active=true]:hover:bg-muted data-[active=true]:focus:bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>) {\n  return (\n    <NavigationMenuPrimitive.Icon\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-none bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Icon>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n  NavigationMenuPositioner,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/navigation-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx",
+      "api": "https://base-ui.com/react/components/navigation-menu.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/pagination-example.json b/apps/v4/public/r/styles/base-sera/pagination-example.json
new file mode 100644
index 0000000000..27d3676166
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/pagination-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "pagination-example",
+  "title": "Pagination",
+  "registryDependencies": [
+    "field",
+    "pagination",
+    "select",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/pagination-example.tsx",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Field, FieldLabel } from \"@/registry/base-sera/ui/field\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/base-sera/ui/pagination\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-sera/ui/select\"\n\nexport default function PaginationExample() {\n  return (\n    <ExampleWrapper>\n      <PaginationBasic />\n      <PaginationSimple />\n      <PaginationIconsOnly />\n    </ExampleWrapper>\n  )\n}\n\nfunction PaginationBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Pagination>\n        <PaginationContent>\n          <PaginationItem>\n            <PaginationPrevious href=\"#\" />\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">1</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\" isActive>\n              2\n            </PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">3</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationEllipsis />\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationNext href=\"#\" />\n          </PaginationItem>\n        </PaginationContent>\n      </Pagination>\n    </Example>\n  )\n}\n\nfunction PaginationSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Pagination>\n        <PaginationContent>\n          <PaginationItem>\n            <PaginationLink href=\"#\">1</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\" isActive>\n              2\n            </PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">3</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">4</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">5</PaginationLink>\n          </PaginationItem>\n        </PaginationContent>\n      </Pagination>\n    </Example>\n  )\n}\n\nfunction PaginationIconsOnly() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <Field orientation=\"horizontal\" className=\"w-fit\">\n          <FieldLabel htmlFor=\"select-rows-per-page\">Rows per page</FieldLabel>\n          <Select defaultValue=\"25\">\n            <SelectTrigger className=\"w-20\" id=\"select-rows-per-page\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectGroup>\n                <SelectItem value=\"10\">10</SelectItem>\n                <SelectItem value=\"25\">25</SelectItem>\n                <SelectItem value=\"50\">50</SelectItem>\n                <SelectItem value=\"100\">100</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Pagination className=\"mx-0 w-auto\">\n          <PaginationContent>\n            <PaginationItem>\n              <PaginationPrevious href=\"#\" />\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationNext href=\"#\" />\n            </PaginationItem>\n          </PaginationContent>\n        </Pagination>\n      </div>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/pagination.json b/apps/v4/public/r/styles/base-sera/pagination.json
new file mode 100644
index 0000000000..b2e1236722
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/pagination.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "pagination",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/ui/pagination.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <Button\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(className)}\n      nativeButton={false}\n      render={\n        <a\n          aria-current={isActive ? \"page\" : undefined}\n          data-slot=\"pagination-link\"\n          data-active={isActive}\n          {...props}\n        />\n      }\n    />\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  text = \"Previous\",\n  ...props\n}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-2!\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n        remixicon=\"RiArrowLeftSLine\"\n        data-icon=\"inline-start\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"hidden sm:block\">{text}</span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  text = \"Next\",\n  ...props\n}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-2!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">{text}</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        data-icon=\"inline-end\"\n        className=\"cn-rtl-flip\"\n      />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"flex size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n        remixicon=\"RiMoreLine\"\n      />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/pagination",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/pagination-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/popover-example.json b/apps/v4/public/r/styles/base-sera/popover-example.json
new file mode 100644
index 0000000000..e53f990054
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/popover-example.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "popover-example",
+  "title": "Popover",
+  "registryDependencies": [
+    "button",
+    "dialog",
+    "field",
+    "input",
+    "popover",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/popover-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-sera/ui/dialog\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/base-sera/ui/popover\"\n\nexport default function PopoverExample() {\n  return (\n    <ExampleWrapper>\n      <PopoverBasic />\n      <PopoverSides />\n      <PopoverWithForm />\n      <PopoverAlignments />\n      <PopoverInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction PopoverBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Popover>\n        <PopoverTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Open Popover\n        </PopoverTrigger>\n        <PopoverContent align=\"start\">\n          <PopoverHeader>\n            <PopoverTitle>Dimensions</PopoverTitle>\n            <PopoverDescription>\n              Set the dimensions for the layer.\n            </PopoverDescription>\n          </PopoverHeader>\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction PopoverSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-col gap-2\">\n        <div className=\"flex flex-wrap gap-2\">\n          {([\"inline-start\", \"left\", \"top\"] as const).map((side) => (\n            <Popover key={side}>\n              <PopoverTrigger\n                render={\n                  <Button variant=\"outline\" className=\"w-fit capitalize\" />\n                }\n              >\n                {side.replace(\"-\", \" \")}\n              </PopoverTrigger>\n              <PopoverContent side={side} className=\"w-40\">\n                <p>Popover on {side.replace(\"-\", \" \")}</p>\n              </PopoverContent>\n            </Popover>\n          ))}\n        </div>\n        <div className=\"flex flex-wrap gap-2\">\n          {([\"bottom\", \"right\", \"inline-end\"] as const).map((side) => (\n            <Popover key={side}>\n              <PopoverTrigger\n                render={\n                  <Button variant=\"outline\" className=\"w-fit capitalize\" />\n                }\n              >\n                {side.replace(\"-\", \" \")}\n              </PopoverTrigger>\n              <PopoverContent side={side} className=\"w-40\">\n                <p>Popover on {side.replace(\"-\", \" \")}</p>\n              </PopoverContent>\n            </Popover>\n          ))}\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction PopoverWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Popover>\n        <PopoverTrigger render={<Button variant=\"outline\" />}>\n          Open Popover\n        </PopoverTrigger>\n        <PopoverContent className=\"w-64\" align=\"start\">\n          <PopoverHeader>\n            <PopoverTitle>Dimensions</PopoverTitle>\n            <PopoverDescription>\n              Set the dimensions for the layer.\n            </PopoverDescription>\n          </PopoverHeader>\n          <FieldGroup className=\"gap-4\">\n            <Field orientation=\"horizontal\">\n              <FieldLabel htmlFor=\"width\" className=\"w-1/2\">\n                Width\n              </FieldLabel>\n              <Input id=\"width\" defaultValue=\"100%\" />\n            </Field>\n            <Field orientation=\"horizontal\">\n              <FieldLabel htmlFor=\"height\" className=\"w-1/2\">\n                Height\n              </FieldLabel>\n              <Input id=\"height\" defaultValue=\"25px\" />\n            </Field>\n          </FieldGroup>\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction PopoverAlignments() {\n  return (\n    <Example title=\"Alignments\">\n      <div className=\"flex gap-6\">\n        <Popover>\n          <PopoverTrigger render={<Button variant=\"outline\" size=\"sm\" />}>\n            Start\n          </PopoverTrigger>\n          <PopoverContent align=\"start\" className=\"w-40\">\n            Aligned to start\n          </PopoverContent>\n        </Popover>\n        <Popover>\n          <PopoverTrigger render={<Button variant=\"outline\" size=\"sm\" />}>\n            Center\n          </PopoverTrigger>\n          <PopoverContent align=\"center\" className=\"w-40\">\n            Aligned to center\n          </PopoverContent>\n        </Popover>\n        <Popover>\n          <PopoverTrigger render={<Button variant=\"outline\" size=\"sm\" />}>\n            End\n          </PopoverTrigger>\n          <PopoverContent align=\"end\" className=\"w-40\">\n            Aligned to end\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction PopoverInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Popover Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the popover.\n            </DialogDescription>\n          </DialogHeader>\n          <Popover>\n            <PopoverTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Popover\n            </PopoverTrigger>\n            <PopoverContent align=\"start\">\n              <PopoverHeader>\n                <PopoverTitle>Popover in Dialog</PopoverTitle>\n                <PopoverDescription>\n                  This popover appears inside a dialog. Click the button to open\n                  it.\n                </PopoverDescription>\n              </PopoverHeader>\n            </PopoverContent>\n          </Popover>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/popover.json b/apps/v4/public/r/styles/base-sera/popover.json
new file mode 100644
index 0000000000..2220d19c07
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/popover.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "popover",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/popover.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction Popover({ ...props }: PopoverPrimitive.Root.Props) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  ...props\n}: PopoverPrimitive.Popup.Props &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            \"z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-none bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-1 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n  return (\n    <PopoverPrimitive.Title\n      data-slot=\"popover-title\"\n      className={cn(\n        \"cn-font-heading text-sm font-semibold tracking-wide\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: PopoverPrimitive.Description.Props) {\n  return (\n    <PopoverPrimitive.Description\n      data-slot=\"popover-description\"\n      className={cn(\n        \"mt-0.5 text-sm leading-relaxed text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/popover",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/popover-example.tsx",
+      "api": "https://base-ui.com/react/components/popover.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/preview-02.json b/apps/v4/public/r/styles/base-sera/preview-02.json
new file mode 100644
index 0000000000..399199dd2f
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/preview-02.json
@@ -0,0 +1,48 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "preview-02",
+  "title": "Preview 02",
+  "dependencies": [
+    "react-qr-code"
+  ],
+  "registryDependencies": [
+    "accordion",
+    "badge",
+    "breadcrumb",
+    "button",
+    "calendar",
+    "card",
+    "chart",
+    "checkbox",
+    "combobox",
+    "dropdown-menu",
+    "empty",
+    "field",
+    "input",
+    "input-group",
+    "item",
+    "label",
+    "native-select",
+    "progress",
+    "radio-group",
+    "select",
+    "separator",
+    "sidebar",
+    "skeleton",
+    "slider",
+    "spinner",
+    "switch",
+    "table",
+    "tabs",
+    "textarea",
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/preview-02/index.tsx",
+      "content": "import { AccountAccess } from \"@/registry/base-sera/blocks/preview-02/cards/account-access\"\nimport { CardOverview } from \"@/registry/base-sera/blocks/preview-02/cards/card-overview\"\nimport { ClaimableBalance } from \"@/registry/base-sera/blocks/preview-02/cards/claimable-balance\"\nimport { ContributionHistory } from \"@/registry/base-sera/blocks/preview-02/cards/contribution-history\"\nimport { CoverArt } from \"@/registry/base-sera/blocks/preview-02/cards/cover-art\"\nimport { DividendIncome } from \"@/registry/base-sera/blocks/preview-02/cards/dividend-income\"\nimport { EmptyConnectBank } from \"@/registry/base-sera/blocks/preview-02/cards/empty-connect-bank\"\nimport { EmptyDistributeTrack } from \"@/registry/base-sera/blocks/preview-02/cards/empty-distribute-track\"\nimport { EmptyExploreCatalog } from \"@/registry/base-sera/blocks/preview-02/cards/empty-explore-catalog\"\nimport { Faq } from \"@/registry/base-sera/blocks/preview-02/cards/faq\"\nimport { FrontDoor } from \"@/registry/base-sera/blocks/preview-02/cards/front-door\"\nimport { IndexInvesting } from \"@/registry/base-sera/blocks/preview-02/cards/index-investing\"\nimport { KitchenIsland } from \"@/registry/base-sera/blocks/preview-02/cards/kitchen-island\"\nimport { LoadingCard } from \"@/registry/base-sera/blocks/preview-02/cards/loading-card\"\nimport { NewMilestone } from \"@/registry/base-sera/blocks/preview-02/cards/new-milestone\"\nimport { NotificationSettings } from \"@/registry/base-sera/blocks/preview-02/cards/notification-settings\"\nimport { Payments } from \"@/registry/base-sera/blocks/preview-02/cards/payments\"\nimport { PayoutThreshold } from \"@/registry/base-sera/blocks/preview-02/cards/payout-threshold\"\nimport { PowerUsage } from \"@/registry/base-sera/blocks/preview-02/cards/power-usage\"\nimport { Preferences } from \"@/registry/base-sera/blocks/preview-02/cards/preferences\"\nimport { QrConnect } from \"@/registry/base-sera/blocks/preview-02/cards/qr-connect\"\nimport { ReceivingMethod } from \"@/registry/base-sera/blocks/preview-02/cards/receiving-method\"\nimport { RecentTransactions } from \"@/registry/base-sera/blocks/preview-02/cards/recent-transactions\"\nimport { ReleaseCatalog } from \"@/registry/base-sera/blocks/preview-02/cards/release-catalog\"\nimport { RollerShades } from \"@/registry/base-sera/blocks/preview-02/cards/roller-shades\"\nimport { SavingsProgress } from \"@/registry/base-sera/blocks/preview-02/cards/savings-progress\"\nimport { SavingsTargets } from \"@/registry/base-sera/blocks/preview-02/cards/savings-targets\"\nimport { SidebarNav } from \"@/registry/base-sera/blocks/preview-02/cards/sidebar-nav\"\nimport { SocialLinks } from \"@/registry/base-sera/blocks/preview-02/cards/social-links\"\nimport { StockPerformance } from \"@/registry/base-sera/blocks/preview-02/cards/stock-performance\"\nimport { SyncingState } from \"@/registry/base-sera/blocks/preview-02/cards/syncing-state\"\nimport { TransferFunds } from \"@/registry/base-sera/blocks/preview-02/cards/transfer-funds\"\nimport { UpcomingPayments } from \"@/registry/base-sera/blocks/preview-02/cards/upcoming-payments\"\n\nexport default function Preview02Example() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden bg-muted contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)] dark:bg-background style-lyra:md:[--gap:--spacing(6)] style-mira:md:[--gap:--spacing(6)]\">\n      <div className=\"flex w-full min-w-max justify-center\">\n        <div\n          className=\"grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background style-lyra:md:w-[2600px] style-mira:md:w-[2600px] *:[div]:gap-(--gap)\"\n          data-slot=\"capture-target\"\n        >\n          <div className=\"flex flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n            <ContributionHistory />\n            <EmptyDistributeTrack />\n            <QrConnect />\n            <DividendIncome />\n            <IndexInvesting />\n            <SyncingState />\n          </div>\n          <div className=\"flex flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n            <PayoutThreshold />\n            <ClaimableBalance />\n            <Preferences />\n            <SavingsProgress />\n            <KitchenIsland />\n          </div>\n          <div className=\"col-span-2 flex flex-col p-1 [contain-intrinsic-size:760px_1200px] [content-visibility:auto]\">\n            <SavingsTargets />\n            <RecentTransactions />\n            <div className=\"grid grid-cols-2 items-start gap-(--gap)\">\n              <div className=\"flex flex-col gap-(--gap)\">\n                <SidebarNav />\n                <Faq />\n              </div>\n              <div className=\"flex flex-col gap-(--gap)\">\n                <Payments />\n                <FrontDoor />\n              </div>\n            </div>\n            <ReleaseCatalog />\n          </div>\n          <div className=\"flex flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n            <AccountAccess />\n            <CardOverview />\n            <TransferFunds />\n            <CoverArt />\n            <LoadingCard />\n          </div>\n          <div className=\"flex flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n            <ReceivingMethod />\n            <PowerUsage />\n            <EmptyConnectBank />\n            <UpcomingPayments />\n            <RollerShades />\n          </div>\n          <div className=\"flex flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n            <StockPerformance />\n            <EmptyExploreCatalog />\n            <NewMilestone />\n            <SocialLinks />\n            <NotificationSettings />\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/preview.json b/apps/v4/public/r/styles/base-sera/preview.json
new file mode 100644
index 0000000000..f88cef3f88
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/preview.json
@@ -0,0 +1,42 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "preview",
+  "title": "Preview",
+  "registryDependencies": [
+    "alert-dialog",
+    "avatar",
+    "badge",
+    "button",
+    "button-group",
+    "card",
+    "chart",
+    "checkbox",
+    "combobox",
+    "dropdown-menu",
+    "empty",
+    "field",
+    "input",
+    "input-group",
+    "item",
+    "label",
+    "popover",
+    "radio-group",
+    "select",
+    "separator",
+    "sheet",
+    "slider",
+    "spinner",
+    "switch",
+    "textarea",
+    "tooltip",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/preview/index.tsx",
+      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/base-sera/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/base-sera/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/base-sera/blocks/preview/cards/anomaly-alert\"\nimport { BarChartCard } from \"@/registry/base-sera/blocks/preview/cards/bar-chart-card\"\nimport { BookAppointment } from \"@/registry/base-sera/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/base-sera/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/base-sera/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/base-sera/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/base-sera/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/base-sera/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/base-sera/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/base-sera/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/base-sera/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/base-sera/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/base-sera/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/base-sera/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/base-sera/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/base-sera/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/base-sera/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/base-sera/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/base-sera/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/base-sera/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/base-sera/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/base-sera/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/base-sera/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/base-sera/blocks/preview/cards/style-overview\"\nimport { TypographySpecimen } from \"@/registry/base-sera/blocks/preview/cards/typography-specimen\"\nimport { UIElements } from \"@/registry/base-sera/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/base-sera/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/base-sera/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/base-sera/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden bg-muted contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)] dark:bg-background style-lyra:md:[--gap:--spacing(6)] style-mira:md:[--gap:--spacing(6)]\">\n      <div className=\"flex w-full min-w-max justify-center\">\n        <div\n          className=\"grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background style-lyra:md:w-[2600px] style-mira:md:w-[2600px] *:[div]:gap-(--gap)\"\n          data-slot=\"capture-target\"\n        >\n          <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n            <StyleOverview />\n            <TypographySpecimen />\n            <div className=\"md:hidden\">\n              <UIElements />\n            </div>\n            <CodespacesCard />\n            <Invoice />\n          </div>\n          <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n            <IconPreviewGrid />\n            <div className=\"hidden w-full md:flex\">\n              <UIElements />\n            </div>\n            <ObservabilityCard />\n            <ShippingAddress />\n          </div>\n          <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n            <EnvironmentVariables />\n            <BarChartCard />\n            <InviteTeam />\n            <ActivateAgentDialog />\n          </div>\n          <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n            <SkeletonLoading />\n            <PieChartCard />\n            <NoTeamMembers />\n            <ReportBug />\n            <Contributors />\n          </div>\n          <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n            <FeedbackForm />\n            <BookAppointment />\n            <SleepReport />\n            <GithubProfile />\n          </div>\n          <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n            <WeeklyFitnessSummary />\n            <FileUpload />\n            <AnalyticsCard />\n            <UsageCard />\n            <Shortcuts />\n          </div>\n          <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n            <AnomalyAlert />\n            <LiveWaveformCard />\n            <Visitors />\n            <ContributionsActivity />\n            <NotFound />\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/progress-example.json b/apps/v4/public/r/styles/base-sera/progress-example.json
new file mode 100644
index 0000000000..21e72c34a7
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/progress-example.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "progress-example",
+  "title": "Progress",
+  "registryDependencies": [
+    "field",
+    "item",
+    "progress",
+    "slider",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/progress-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-sera/ui/item\"\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressValue,\n} from \"@/registry/base-sera/ui/progress\"\nimport { Slider } from \"@/registry/base-sera/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Progress value={56}>\n        <ProgressLabel>Upload progress</ProgressLabel>\n        <ProgressValue />\n      </Progress>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState(50)\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={(value) => setValue(value as number)}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-sm text-muted-foreground\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/progress.json b/apps/v4/public/r/styles/base-sera/progress.json
new file mode 100644
index 0000000000..d9811d81e2
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/progress.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "progress",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/progress.tsx",
+      "content": "\"use client\"\n\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction Progress({\n  className,\n  children,\n  value,\n  ...props\n}: ProgressPrimitive.Root.Props) {\n  return (\n    <ProgressPrimitive.Root\n      value={value}\n      data-slot=\"progress\"\n      className={cn(\"flex flex-wrap gap-3\", className)}\n      {...props}\n    >\n      {children}\n      <ProgressTrack>\n        <ProgressIndicator />\n      </ProgressTrack>\n    </ProgressPrimitive.Root>\n  )\n}\n\nfunction ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {\n  return (\n    <ProgressPrimitive.Track\n      className={cn(\n        \"relative flex h-0.5 w-full items-center overflow-x-hidden rounded-none bg-muted\",\n        className\n      )}\n      data-slot=\"progress-track\"\n      {...props}\n    />\n  )\n}\n\nfunction ProgressIndicator({\n  className,\n  ...props\n}: ProgressPrimitive.Indicator.Props) {\n  return (\n    <ProgressPrimitive.Indicator\n      data-slot=\"progress-indicator\"\n      className={cn(\"h-full bg-primary transition-all\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {\n  return (\n    <ProgressPrimitive.Label\n      className={cn(\"text-xs font-semibold tracking-wide uppercase\", className)}\n      data-slot=\"progress-label\"\n      {...props}\n    />\n  )\n}\n\nfunction ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {\n  return (\n    <ProgressPrimitive.Value\n      className={cn(\n        \"ml-auto text-sm text-muted-foreground tabular-nums\",\n        className\n      )}\n      data-slot=\"progress-value\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Progress,\n  ProgressTrack,\n  ProgressIndicator,\n  ProgressLabel,\n  ProgressValue,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/progress",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/progress-example.tsx",
+      "api": "https://base-ui.com/react/components/progress.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/radio-group-example.json b/apps/v4/public/r/styles/base-sera/radio-group-example.json
new file mode 100644
index 0000000000..9a10cfbcaf
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/radio-group-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "radio-group-example",
+  "title": "Radio Group",
+  "registryDependencies": [
+    "field",
+    "radio-group",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/radio-group-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/base-sera/ui/field\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-sera/ui/radio-group\"\n\nexport default function RadioGroupExample() {\n  return (\n    <ExampleWrapper>\n      <RadioGroupBasic />\n      <RadioGroupWithDescriptions />\n      <RadioGroupWithFieldSet />\n      <RadioGroupGrid />\n      <RadioGroupDisabled />\n      <RadioGroupInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction RadioGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <RadioGroup defaultValue=\"comfortable\">\n        <Field orientation=\"horizontal\">\n          <RadioGroupItem value=\"default\" id=\"r1\" />\n          <FieldLabel htmlFor=\"r1\" className=\"font-normal\">\n            Default\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n          <FieldLabel htmlFor=\"r2\" className=\"font-normal\">\n            Comfortable\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <RadioGroupItem value=\"compact\" id=\"r3\" />\n          <FieldLabel htmlFor=\"r3\" className=\"font-normal\">\n            Compact\n          </FieldLabel>\n        </Field>\n      </RadioGroup>\n    </Example>\n  )\n}\n\nfunction RadioGroupWithDescriptions() {\n  return (\n    <Example title=\"With Descriptions\">\n      <RadioGroup defaultValue=\"plus\">\n        <FieldLabel htmlFor=\"plus-plan\">\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <div className=\"font-medium\">Plus</div>\n              <FieldDescription>\n                For individuals and small teams\n              </FieldDescription>\n            </FieldContent>\n            <RadioGroupItem value=\"plus\" id=\"plus-plan\" />\n          </Field>\n        </FieldLabel>\n        <FieldLabel htmlFor=\"pro-plan\">\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <div className=\"font-medium\">Pro</div>\n              <FieldDescription>For growing businesses</FieldDescription>\n            </FieldContent>\n            <RadioGroupItem value=\"pro\" id=\"pro-plan\" />\n          </Field>\n        </FieldLabel>\n        <FieldLabel htmlFor=\"enterprise-plan\">\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <div className=\"font-medium\">Enterprise</div>\n              <FieldDescription>\n                For large teams and enterprises\n              </FieldDescription>\n            </FieldContent>\n            <RadioGroupItem value=\"enterprise\" id=\"enterprise-plan\" />\n          </Field>\n        </FieldLabel>\n      </RadioGroup>\n    </Example>\n  )\n}\n\nfunction RadioGroupWithFieldSet() {\n  return (\n    <Example title=\"With FieldSet\">\n      <FieldSet>\n        <FieldLegend>Battery Level</FieldLegend>\n        <FieldDescription>\n          Choose your preferred battery level.\n        </FieldDescription>\n        <RadioGroup defaultValue=\"medium\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"high\" id=\"battery-high\" />\n            <FieldLabel htmlFor=\"battery-high\" className=\"font-normal\">\n              High\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n            <FieldLabel htmlFor=\"battery-medium\" className=\"font-normal\">\n              Medium\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"low\" id=\"battery-low\" />\n            <FieldLabel htmlFor=\"battery-low\" className=\"font-normal\">\n              Low\n            </FieldLabel>\n          </Field>\n        </RadioGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction RadioGroupGrid() {\n  return (\n    <Example title=\"Grid Layout\">\n      <RadioGroup defaultValue=\"medium\" className=\"grid grid-cols-2 gap-2\">\n        <FieldLabel htmlFor=\"size-small\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"small\" id=\"size-small\" />\n            <div className=\"font-medium\">Small</div>\n          </Field>\n        </FieldLabel>\n        <FieldLabel htmlFor=\"size-medium\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"medium\" id=\"size-medium\" />\n            <div className=\"font-medium\">Medium</div>\n          </Field>\n        </FieldLabel>\n        <FieldLabel htmlFor=\"size-large\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"large\" id=\"size-large\" />\n            <div className=\"font-medium\">Large</div>\n          </Field>\n        </FieldLabel>\n        <FieldLabel htmlFor=\"size-xlarge\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"xlarge\" id=\"size-xlarge\" />\n            <div className=\"font-medium\">X-Large</div>\n          </Field>\n        </FieldLabel>\n      </RadioGroup>\n    </Example>\n  )\n}\n\nfunction RadioGroupDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <RadioGroup defaultValue=\"option2\" disabled>\n        <Field orientation=\"horizontal\">\n          <RadioGroupItem value=\"option1\" id=\"disabled-1\" />\n          <FieldLabel htmlFor=\"disabled-1\" className=\"font-normal\">\n            Option 1\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <RadioGroupItem value=\"option2\" id=\"disabled-2\" />\n          <FieldLabel htmlFor=\"disabled-2\" className=\"font-normal\">\n            Option 2\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <RadioGroupItem value=\"option3\" id=\"disabled-3\" />\n          <FieldLabel htmlFor=\"disabled-3\" className=\"font-normal\">\n            Option 3\n          </FieldLabel>\n        </Field>\n      </RadioGroup>\n    </Example>\n  )\n}\n\nfunction RadioGroupInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <FieldSet>\n        <FieldLegend>Notification Preferences</FieldLegend>\n        <FieldDescription>\n          Choose how you want to receive notifications.\n        </FieldDescription>\n        <RadioGroup defaultValue=\"email\">\n          <Field orientation=\"horizontal\" data-invalid>\n            <RadioGroupItem value=\"email\" id=\"invalid-email\" aria-invalid />\n            <FieldLabel htmlFor=\"invalid-email\" className=\"font-normal\">\n              Email only\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\" data-invalid>\n            <RadioGroupItem value=\"sms\" id=\"invalid-sms\" aria-invalid />\n            <FieldLabel htmlFor=\"invalid-sms\" className=\"font-normal\">\n              SMS only\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\" data-invalid>\n            <RadioGroupItem value=\"both\" id=\"invalid-both\" aria-invalid />\n            <FieldLabel htmlFor=\"invalid-both\" className=\"font-normal\">\n              Both Email & SMS\n            </FieldLabel>\n          </Field>\n        </RadioGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/radio-group.json b/apps/v4/public/r/styles/base-sera/radio-group.json
new file mode 100644
index 0000000000..305b204e63
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/radio-group.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "radio-group",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/radio-group.tsx",
+      "content": "\"use client\"\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid w-full gap-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"group/radio-group-item peer relative flex aspect-square size-4.5 shrink-0 rounded-full border border-input bg-transparent outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-foreground dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-foreground\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex size-4.5 items-center justify-center\"\n      >\n        <span className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-foreground\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/radio-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/radio-group-example.tsx",
+      "api": "https://base-ui.com/react/components/radio-group.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/registry.json b/apps/v4/public/r/styles/base-sera/registry.json
new file mode 100644
index 0000000000..d893365282
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/registry.json
@@ -0,0 +1,3527 @@
+{
+  "name": "shadcn/ui",
+  "homepage": "https://ui.shadcn.com",
+  "items": [
+    {
+      "name": "index",
+      "dependencies": [
+        "class-variance-authority",
+        "lucide-react",
+        "@base-ui/react"
+      ],
+      "devDependencies": ["tw-animate-css", "shadcn"],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "cssVars": {},
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@import \"shadcn/tailwind.css\"": {},
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          }
+        }
+      },
+      "type": "registry:style"
+    },
+    {
+      "name": "style",
+      "dependencies": [
+        "class-variance-authority",
+        "lucide-react",
+        "@base-ui/react"
+      ],
+      "devDependencies": ["tw-animate-css", "shadcn"],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "cssVars": {},
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@import \"shadcn/tailwind.css\"": {},
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          }
+        }
+      },
+      "type": "registry:style"
+    },
+    {
+      "name": "accordion",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/accordion.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/accordion",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/accordion-example.tsx",
+          "api": "https://base-ui.com/react/components/accordion.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "alert",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/alert.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/alert",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "alert-dialog",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/base-sera/ui/alert-dialog.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/alert-dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-dialog-example.tsx",
+          "api": "https://base-ui.com/react/components/alert-dialog.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "aspect-ratio",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/aspect-ratio.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/aspect-ratio",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/aspect-ratio-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "avatar",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/avatar.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/avatar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/avatar-example.tsx",
+          "api": "https://base-ui.com/react/components/avatar.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "badge",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/badge.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/badge",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/badge-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "breadcrumb",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/breadcrumb.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/breadcrumb",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/breadcrumb-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "button",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/button.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/button",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "button-group",
+      "registryDependencies": ["separator"],
+      "files": [
+        {
+          "path": "registry/base-sera/ui/button-group.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/button-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-group-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "calendar",
+      "dependencies": ["react-day-picker@latest", "date-fns"],
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/base-sera/ui/calendar.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/calendar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/calendar-example.tsx",
+          "api": "https://react-day-picker.js.org"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "card",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/card.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/card-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "carousel",
+      "dependencies": ["embla-carousel-react"],
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/base-sera/ui/carousel.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/carousel",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/carousel-example.tsx",
+          "api": "https://www.embla-carousel.com/get-started/react"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "chart",
+      "dependencies": ["recharts@3.8.0"],
+      "registryDependencies": ["card"],
+      "files": [
+        {
+          "path": "registry/base-sera/ui/chart.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/chart",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/chart-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "checkbox",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/checkbox.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/checkbox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/checkbox-example.tsx",
+          "api": "https://base-ui.com/react/components/checkbox.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "collapsible",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/collapsible.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/collapsible",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/collapsible-example.tsx",
+          "api": "https://base-ui.com/react/components/collapsible.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "combobox",
+      "dependencies": ["@base-ui/react"],
+      "registryDependencies": ["button", "input-group"],
+      "files": [
+        {
+          "path": "registry/base-sera/ui/combobox.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/combobox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/combobox-example.tsx",
+          "api": "https://base-ui.com/react/components/combobox.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "command",
+      "dependencies": ["cmdk"],
+      "registryDependencies": ["dialog", "input-group"],
+      "files": [
+        {
+          "path": "registry/base-sera/ui/command.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/command",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/command-example.tsx",
+          "api": "https://github.com/dip/cmdk"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "context-menu",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/context-menu.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/context-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/context-menu-example.tsx",
+          "api": "https://base-ui.com/react/components/context-menu.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "dialog",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/base-sera/ui/dialog.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dialog-example.tsx",
+          "api": "https://base-ui.com/react/components/dialog.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "drawer",
+      "dependencies": ["vaul"],
+      "files": [
+        {
+          "path": "registry/base-sera/ui/drawer.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/drawer",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
+          "api": "https://vaul.emilkowal.ski/getting-started"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "dropdown-menu",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/dropdown-menu.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/dropdown-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx",
+          "api": "https://base-ui.com/react/components/menu.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "empty",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/empty.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/empty",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/empty-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "field",
+      "registryDependencies": ["label", "separator"],
+      "files": [
+        {
+          "path": "registry/base-sera/ui/field.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/field",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/field-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "form",
+      "type": "registry:ui"
+    },
+    {
+      "name": "hover-card",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/hover-card.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/hover-card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/hover-card-example.tsx",
+          "api": "https://base-ui.com/react/components/hover-card.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "input",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/input.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/input",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "input-group",
+      "registryDependencies": ["button", "input", "textarea"],
+      "files": [
+        {
+          "path": "registry/base-sera/ui/input-group.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/input-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-group-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "input-otp",
+      "dependencies": ["input-otp"],
+      "files": [
+        {
+          "path": "registry/base-sera/ui/input-otp.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/input-otp",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-otp-example.tsx",
+          "api": "https://input-otp.rodz.dev"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "item",
+      "registryDependencies": ["separator"],
+      "files": [
+        {
+          "path": "registry/base-sera/ui/item.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/item",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/item-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "label",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/label.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/label",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/label-example.tsx",
+          "api": "https://base-ui.com/react/components/label.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "menubar",
+      "registryDependencies": ["dropdown-menu"],
+      "files": [
+        {
+          "path": "registry/base-sera/ui/menubar.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/menubar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/menubar-example.tsx",
+          "api": "https://base-ui.com/react/components/menubar.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "navigation-menu",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/navigation-menu.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/navigation-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx",
+          "api": "https://base-ui.com/react/components/navigation-menu.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "pagination",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/base-sera/ui/pagination.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/pagination",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/pagination-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "popover",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/popover.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/popover",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/popover-example.tsx",
+          "api": "https://base-ui.com/react/components/popover.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "progress",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/progress.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/progress",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/progress-example.tsx",
+          "api": "https://base-ui.com/react/components/progress.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "radio-group",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/radio-group.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/radio-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/radio-group-example.tsx",
+          "api": "https://base-ui.com/react/components/radio-group.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "resizable",
+      "dependencies": ["react-resizable-panels"],
+      "files": [
+        {
+          "path": "registry/base-sera/ui/resizable.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/resizable",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/resizable-example.tsx",
+          "api": "https://github.com/bvaughn/react-resizable-panels"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "scroll-area",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/scroll-area.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/scroll-area",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/scroll-area-example.tsx",
+          "api": "https://base-ui.com/react/components/scroll-area.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "select",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/select.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/select-example.tsx",
+          "api": "https://base-ui.com/react/components/select.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "separator",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/separator.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/separator",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/separator-example.tsx",
+          "api": "https://base-ui.com/react/components/separator.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "sheet",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/base-sera/ui/sheet.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/sheet",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sheet-example.tsx",
+          "api": "https://base-ui.com/react/components/dialog.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "sidebar",
+      "registryDependencies": [
+        "button",
+        "input",
+        "separator",
+        "sheet",
+        "skeleton",
+        "tooltip",
+        "use-mobile"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/ui/sidebar.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/sidebar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sidebar-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "skeleton",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/skeleton.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/skeleton",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/skeleton-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "slider",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/slider.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/slider",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/slider-example.tsx",
+          "api": "https://base-ui.com/react/components/slider.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "sonner",
+      "dependencies": ["sonner", "next-themes"],
+      "files": [
+        {
+          "path": "registry/base-sera/ui/sonner.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/sonner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sonner-example.tsx",
+          "api": "https://sonner.emilkowal.ski"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "spinner",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/spinner.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/spinner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/spinner-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "switch",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/switch.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/switch",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/switch-example.tsx",
+          "api": "https://base-ui.com/react/components/switch.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "table",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/table.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/table",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/table-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "tabs",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/tabs.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/tabs",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tabs-example.tsx",
+          "api": "https://base-ui.com/react/components/tabs.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "textarea",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/textarea.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/textarea",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/textarea-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "toggle",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/toggle.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/toggle",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-example.tsx",
+          "api": "https://base-ui.com/react/components/toggle.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "toggle-group",
+      "registryDependencies": ["toggle"],
+      "files": [
+        {
+          "path": "registry/base-sera/ui/toggle-group.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/toggle-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-group-example.tsx",
+          "api": "https://base-ui.com/react/components/toggle-group.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "tooltip",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/tooltip.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/tooltip",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tooltip-example.tsx",
+          "api": "https://base-ui.com/react/components/tooltip.md"
+        }
+      },
+      "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
+      "type": "registry:ui"
+    },
+    {
+      "name": "kbd",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/kbd.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/kbd",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/kbd-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "native-select",
+      "files": [
+        {
+          "path": "registry/base-sera/ui/native-select.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/native-select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/native-select-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "direction",
+      "dependencies": ["@base-ui/react"],
+      "files": [
+        {
+          "path": "registry/base-sera/ui/direction.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/direction",
+          "api": "https://base-ui.com/react/utils/direction-provider.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "accordion-example",
+      "title": "Accordion",
+      "registryDependencies": ["accordion", "button", "card", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/accordion-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "alert-example",
+      "title": "Alert",
+      "registryDependencies": ["alert", "badge", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/alert-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "alert-dialog-example",
+      "title": "Alert Dialog",
+      "registryDependencies": ["alert-dialog", "button", "dialog", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/alert-dialog-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "aspect-ratio-example",
+      "title": "Aspect Ratio",
+      "registryDependencies": ["aspect-ratio", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/aspect-ratio-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "avatar-example",
+      "title": "Avatar",
+      "registryDependencies": ["avatar", "button", "empty", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/avatar-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "badge-example",
+      "title": "Badge",
+      "registryDependencies": ["badge", "spinner", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/badge-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "breadcrumb-example",
+      "title": "Breadcrumb",
+      "registryDependencies": ["breadcrumb", "dropdown-menu", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/breadcrumb-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "button-example",
+      "title": "Button",
+      "registryDependencies": ["button", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/button-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "button-group-example",
+      "title": "Button Group",
+      "registryDependencies": [
+        "button",
+        "button-group",
+        "dropdown-menu",
+        "field",
+        "input",
+        "input-group",
+        "label",
+        "popover",
+        "select",
+        "tooltip",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/button-group-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "calendar-example",
+      "title": "Calendar",
+      "registryDependencies": [
+        "button",
+        "calendar",
+        "card",
+        "field",
+        "input",
+        "label",
+        "popover",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/calendar-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "card-example",
+      "title": "Card",
+      "registryDependencies": [
+        "avatar",
+        "button",
+        "card",
+        "field",
+        "input",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/card-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "carousel-example",
+      "title": "Carousel",
+      "registryDependencies": ["card", "carousel", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/carousel-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "chart-example",
+      "title": "Chart",
+      "registryDependencies": ["chart", "card", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/chart-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "checkbox-example",
+      "title": "Checkbox",
+      "registryDependencies": ["checkbox", "field", "table", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/checkbox-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "collapsible-example",
+      "title": "Collapsible",
+      "registryDependencies": [
+        "button",
+        "card",
+        "collapsible",
+        "field",
+        "input",
+        "tabs",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/collapsible-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "combobox-example",
+      "title": "Combobox",
+      "registryDependencies": [
+        "button",
+        "card",
+        "combobox",
+        "dialog",
+        "field",
+        "input",
+        "input-group",
+        "item",
+        "select",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/combobox-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "command-example",
+      "title": "Command",
+      "registryDependencies": ["button", "command", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/command-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "context-menu-example",
+      "title": "Context Menu",
+      "registryDependencies": ["button", "context-menu", "dialog", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/context-menu-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "dialog-example",
+      "title": "Dialog",
+      "registryDependencies": [
+        "button",
+        "checkbox",
+        "dialog",
+        "field",
+        "input",
+        "input-group",
+        "kbd",
+        "native-select",
+        "select",
+        "switch",
+        "tabs",
+        "textarea",
+        "tooltip",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/dialog-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "drawer-example",
+      "title": "Drawer",
+      "registryDependencies": ["drawer", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/drawer-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "dropdown-menu-example",
+      "title": "Dropdown Menu",
+      "registryDependencies": [
+        "avatar",
+        "button",
+        "dialog",
+        "dropdown-menu",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/dropdown-menu-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "empty-example",
+      "title": "Empty",
+      "registryDependencies": [
+        "button",
+        "empty",
+        "input-group",
+        "kbd",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/empty-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "field-example",
+      "title": "Field",
+      "registryDependencies": [
+        "badge",
+        "checkbox",
+        "field",
+        "input",
+        "input-otp",
+        "native-select",
+        "radio-group",
+        "select",
+        "slider",
+        "switch",
+        "textarea",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/field-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "hover-card-example",
+      "title": "Hover Card",
+      "registryDependencies": ["button", "dialog", "hover-card", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/hover-card-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "input-example",
+      "title": "Input",
+      "registryDependencies": [
+        "button",
+        "field",
+        "input",
+        "native-select",
+        "select",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/input-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "input-group-example",
+      "title": "Input Group",
+      "registryDependencies": [
+        "button",
+        "button-group",
+        "card",
+        "dropdown-menu",
+        "field",
+        "input",
+        "input-group",
+        "kbd",
+        "popover",
+        "spinner",
+        "textarea",
+        "tooltip",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/input-group-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "input-otp-example",
+      "title": "Input OTP",
+      "registryDependencies": [
+        "button",
+        "card",
+        "field",
+        "input-otp",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/input-otp-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "item-example",
+      "title": "Item",
+      "registryDependencies": ["button", "item", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/item-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "kbd-example",
+      "title": "Kbd",
+      "registryDependencies": [
+        "button",
+        "input-group",
+        "kbd",
+        "tooltip",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/kbd-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "label-example",
+      "title": "Label",
+      "registryDependencies": [
+        "checkbox",
+        "field",
+        "input",
+        "label",
+        "textarea",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/label-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "menubar-example",
+      "title": "Menubar",
+      "registryDependencies": ["button", "dialog", "menubar", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/menubar-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "native-select-example",
+      "title": "Native Select",
+      "registryDependencies": ["field", "native-select", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/native-select-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "navigation-menu-example",
+      "title": "Navigation Menu",
+      "registryDependencies": [
+        "button",
+        "dialog",
+        "navigation-menu",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/navigation-menu-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "pagination-example",
+      "title": "Pagination",
+      "registryDependencies": ["field", "pagination", "select", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/pagination-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "popover-example",
+      "title": "Popover",
+      "registryDependencies": [
+        "button",
+        "dialog",
+        "field",
+        "input",
+        "popover",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/popover-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "progress-example",
+      "title": "Progress",
+      "registryDependencies": [
+        "field",
+        "item",
+        "progress",
+        "slider",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/progress-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "radio-group-example",
+      "title": "Radio Group",
+      "registryDependencies": ["field", "radio-group", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/radio-group-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "resizable-example",
+      "title": "Resizable",
+      "registryDependencies": ["resizable", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/resizable-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "scroll-area-example",
+      "title": "Scroll Area",
+      "registryDependencies": ["scroll-area", "separator", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/scroll-area-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "select-example",
+      "title": "Select",
+      "registryDependencies": [
+        "button",
+        "dialog",
+        "field",
+        "input",
+        "item",
+        "native-select",
+        "select",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/select-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "separator-example",
+      "title": "Separator",
+      "registryDependencies": ["separator", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/separator-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "sheet-example",
+      "title": "Sheet",
+      "registryDependencies": ["button", "field", "input", "sheet", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/sheet-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "sidebar-example",
+      "title": "Sidebar",
+      "registryDependencies": [
+        "button",
+        "dropdown-menu",
+        "item",
+        "label",
+        "sidebar",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/sidebar-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "sidebar-icon-example",
+      "title": "Sidebar (Icon)",
+      "registryDependencies": [
+        "avatar",
+        "button",
+        "collapsible",
+        "dropdown-menu",
+        "item",
+        "sidebar",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/sidebar-icon-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "sidebar-inset-example",
+      "title": "Sidebar (Inset)",
+      "registryDependencies": ["collapsible", "sidebar", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/sidebar-inset-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "sidebar-floating-example",
+      "title": "Sidebar (Floating)",
+      "registryDependencies": [
+        "button",
+        "card",
+        "dropdown-menu",
+        "field",
+        "item",
+        "sidebar",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/sidebar-floating-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "skeleton-example",
+      "title": "Skeleton",
+      "registryDependencies": ["skeleton", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/skeleton-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "slider-example",
+      "title": "Slider",
+      "registryDependencies": ["label", "slider", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/slider-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "sonner-example",
+      "title": "Sonner",
+      "registryDependencies": ["sonner", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/sonner-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "spinner-example",
+      "title": "Spinner",
+      "registryDependencies": [
+        "badge",
+        "button",
+        "empty",
+        "field",
+        "input-group",
+        "spinner",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/spinner-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "switch-example",
+      "title": "Switch",
+      "registryDependencies": ["field", "label", "switch", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/switch-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "table-example",
+      "title": "Table",
+      "registryDependencies": [
+        "button",
+        "dropdown-menu",
+        "input",
+        "select",
+        "table",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/table-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "tabs-example",
+      "title": "Tabs",
+      "registryDependencies": ["button", "dropdown-menu", "tabs", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/tabs-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "textarea-example",
+      "title": "Textarea",
+      "registryDependencies": ["field", "textarea", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/textarea-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "toggle-example",
+      "title": "Toggle",
+      "registryDependencies": ["toggle", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/toggle-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "toggle-group-example",
+      "title": "Toggle Group",
+      "registryDependencies": ["input", "select", "toggle-group", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/toggle-group-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "tooltip-example",
+      "title": "Tooltip",
+      "registryDependencies": ["button", "kbd", "tooltip", "example"],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/tooltip-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "demo",
+      "title": "Demo",
+      "registryDependencies": [
+        "alert-dialog",
+        "badge",
+        "button",
+        "button-group",
+        "card",
+        "checkbox",
+        "dropdown-menu",
+        "field",
+        "input-group",
+        "item",
+        "radio-group",
+        "slider",
+        "switch",
+        "textarea"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/demo.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "component-example",
+      "title": "Example",
+      "registryDependencies": [
+        "alert-dialog",
+        "badge",
+        "button",
+        "card",
+        "combobox",
+        "dropdown-menu",
+        "field",
+        "input",
+        "select",
+        "textarea",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/examples/component-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "utils",
+      "dependencies": ["clsx", "tailwind-merge"],
+      "files": [
+        {
+          "path": "registry/base-sera/lib/utils.ts",
+          "type": "registry:lib"
+        }
+      ],
+      "type": "registry:lib"
+    },
+    {
+      "name": "example",
+      "title": "Example",
+      "files": [
+        {
+          "path": "registry/base-sera/components/example.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "type": "registry:component"
+    },
+    {
+      "name": "preview",
+      "title": "Preview",
+      "registryDependencies": [
+        "alert-dialog",
+        "avatar",
+        "badge",
+        "button",
+        "button-group",
+        "card",
+        "chart",
+        "checkbox",
+        "combobox",
+        "dropdown-menu",
+        "empty",
+        "field",
+        "input",
+        "input-group",
+        "item",
+        "label",
+        "popover",
+        "radio-group",
+        "select",
+        "separator",
+        "sheet",
+        "slider",
+        "spinner",
+        "switch",
+        "textarea",
+        "tooltip",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/preview/index.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "type": "registry:block"
+    },
+    {
+      "name": "preview-02",
+      "title": "Preview 02",
+      "dependencies": ["react-qr-code"],
+      "registryDependencies": [
+        "accordion",
+        "badge",
+        "breadcrumb",
+        "button",
+        "calendar",
+        "card",
+        "chart",
+        "checkbox",
+        "combobox",
+        "dropdown-menu",
+        "empty",
+        "field",
+        "input",
+        "input-group",
+        "item",
+        "label",
+        "native-select",
+        "progress",
+        "radio-group",
+        "select",
+        "separator",
+        "sidebar",
+        "skeleton",
+        "slider",
+        "spinner",
+        "switch",
+        "table",
+        "tabs",
+        "textarea",
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/preview-02/index.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "type": "registry:block"
+    },
+    {
+      "name": "login-01",
+      "title": "Login 01",
+      "description": "A simple login form.",
+      "registryDependencies": ["button", "card", "input", "label", "field"],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/login-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/login-01/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["authentication", "login"],
+      "type": "registry:block"
+    },
+    {
+      "name": "login-02",
+      "title": "Login 02",
+      "description": "A two column login page with a cover image.",
+      "registryDependencies": ["button", "input", "label", "field"],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/login-02/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/login-02/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["authentication", "login"],
+      "type": "registry:block"
+    },
+    {
+      "name": "login-03",
+      "title": "Login 03",
+      "description": "A login page with a muted background color.",
+      "registryDependencies": ["button", "card", "input", "label", "field"],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/login-03/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/login-03/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["authentication", "login"],
+      "type": "registry:block"
+    },
+    {
+      "name": "login-04",
+      "title": "Login 04",
+      "description": "A login page with form and image.",
+      "registryDependencies": ["button", "card", "input", "label", "field"],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/login-04/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/login-04/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["authentication", "login"],
+      "type": "registry:block"
+    },
+    {
+      "name": "login-05",
+      "title": "Login 05",
+      "description": "A simple email-only login page.",
+      "registryDependencies": ["button", "input", "label", "field"],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/login-05/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/login-05/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["authentication", "login"],
+      "type": "registry:block"
+    },
+    {
+      "name": "signup-01",
+      "title": "Signup 01",
+      "description": "A simple signup form.",
+      "registryDependencies": ["button", "card", "input", "label"],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/signup-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/signup/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/signup-01/components/signup-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["authentication", "signup"],
+      "type": "registry:block"
+    },
+    {
+      "name": "signup-02",
+      "title": "Signup 02",
+      "description": "A two column signup page with a cover image.",
+      "registryDependencies": ["button", "input", "label", "field"],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/signup-02/page.tsx",
+          "type": "registry:page",
+          "target": "app/signup/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/signup-02/components/signup-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["authentication", "signup"],
+      "type": "registry:block"
+    },
+    {
+      "name": "signup-03",
+      "title": "Signup 03",
+      "description": "A signup page with a muted background color.",
+      "registryDependencies": ["button", "card", "input", "label", "field"],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/signup-03/page.tsx",
+          "type": "registry:page",
+          "target": "app/signup/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/signup-03/components/signup-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["authentication", "signup"],
+      "type": "registry:block"
+    },
+    {
+      "name": "signup-04",
+      "title": "Signup 04",
+      "description": "A signup page with form and image.",
+      "registryDependencies": ["button", "card", "input", "label", "field"],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/signup-04/page.tsx",
+          "type": "registry:page",
+          "target": "app/signup/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/signup-04/components/signup-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["authentication", "signup"],
+      "type": "registry:block"
+    },
+    {
+      "name": "signup-05",
+      "title": "Signup 05",
+      "description": "A simple signup form with social providers.",
+      "registryDependencies": ["button", "input", "label"],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/signup-05/page.tsx",
+          "type": "registry:page",
+          "target": "app/signup/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/signup-05/components/signup-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["authentication", "signup"],
+      "type": "registry:block"
+    },
+    {
+      "name": "dashboard-01",
+      "title": "Dashboard 01",
+      "description": "A dashboard with sidebar, charts and data table.",
+      "dependencies": [
+        "@dnd-kit/core",
+        "@dnd-kit/modifiers",
+        "@dnd-kit/sortable",
+        "@dnd-kit/utilities",
+        "@tanstack/react-table",
+        "zod"
+      ],
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "chart",
+        "card",
+        "select",
+        "tabs",
+        "table",
+        "toggle-group",
+        "badge",
+        "button",
+        "checkbox",
+        "dropdown-menu",
+        "drawer",
+        "input",
+        "avatar",
+        "sheet",
+        "sonner"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/dashboard-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/dashboard-01/data.json",
+          "type": "registry:file",
+          "target": "app/dashboard/data.json"
+        },
+        {
+          "path": "registry/base-sera/blocks/dashboard-01/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/dashboard-01/components/chart-area-interactive.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/dashboard-01/components/data-table.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/dashboard-01/components/nav-documents.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/dashboard-01/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/dashboard-01/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/dashboard-01/components/nav-user.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/dashboard-01/components/section-cards.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/dashboard-01/components/site-header.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "1000px"
+      },
+      "categories": ["dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-01",
+      "title": "Sidebar 01",
+      "description": "A simple sidebar with navigation grouped by section.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/sidebar-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-01/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-01/components/search-form.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-01/components/version-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-02",
+      "title": "Sidebar 02",
+      "description": "A sidebar with collapsible sections.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/sidebar-02/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-02/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-02/components/search-form.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-02/components/version-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-03",
+      "title": "Sidebar 03",
+      "description": "A sidebar with submenus.",
+      "registryDependencies": ["sidebar", "breadcrumb"],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/sidebar-03/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-03/components/app-sidebar.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-04",
+      "title": "Sidebar 04",
+      "description": "A floating sidebar with submenus.",
+      "registryDependencies": ["sidebar", "breadcrumb", "separator"],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/sidebar-04/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-04/components/app-sidebar.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-05",
+      "title": "Sidebar 05",
+      "description": "A sidebar with collapsible submenus.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/sidebar-05/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-05/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-05/components/search-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-06",
+      "title": "Sidebar 06",
+      "description": "A sidebar with submenus as dropdowns.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "card",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/sidebar-06/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-06/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-06/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-07",
+      "title": "Sidebar 07",
+      "description": "A sidebar that collapses to icons.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/sidebar-07/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-07/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-07/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-07/components/nav-projects.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-07/components/nav-user.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-07/components/team-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-08",
+      "title": "Sidebar 08",
+      "description": "An inset sidebar with secondary navigation.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/sidebar-08/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-08/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-08/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-08/components/nav-projects.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-08/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-08/components/nav-user.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-09",
+      "title": "Sidebar 09",
+      "description": "Collapsible nested sidebars.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar",
+        "switch",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/sidebar-09/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-09/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-09/components/nav-user.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-10",
+      "title": "Sidebar 10",
+      "description": "A sidebar in a popover.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/sidebar-10/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-10/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-10/components/nav-actions.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-10/components/nav-favorites.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-10/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-10/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-10/components/nav-workspaces.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-10/components/team-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-11",
+      "title": "Sidebar 11",
+      "description": "A sidebar with a collapsible file tree.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/sidebar-11/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-11/components/app-sidebar.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-12",
+      "title": "Sidebar 12",
+      "description": "A sidebar with a calendar.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "calendar",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/sidebar-12/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-12/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-12/components/calendars.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-12/components/date-picker.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-12/components/nav-user.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-13",
+      "title": "Sidebar 13",
+      "description": "A sidebar in a dialog.",
+      "registryDependencies": ["sidebar", "breadcrumb", "button", "dialog"],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/sidebar-13/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-13/components/settings-dialog.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-14",
+      "title": "Sidebar 14",
+      "description": "A sidebar on the right.",
+      "registryDependencies": ["sidebar", "breadcrumb"],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/sidebar-14/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-14/components/app-sidebar.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-15",
+      "title": "Sidebar 15",
+      "description": "A left and right sidebar.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu",
+        "calendar",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/sidebar-15/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-15/components/calendars.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-15/components/date-picker.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-15/components/nav-favorites.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-15/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-15/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-15/components/nav-user.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-15/components/nav-workspaces.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-15/components/sidebar-left.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-15/components/sidebar-right.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-15/components/team-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-16",
+      "title": "Sidebar 16",
+      "description": "A sidebar with a sticky site header.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/base-sera/blocks/sidebar-16/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-16/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-16/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-16/components/nav-projects.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-16/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-16/components/nav-user.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-16/components/search-form.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/base-sera/blocks/sidebar-16/components/site-header.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "use-mobile",
+      "files": [
+        {
+          "path": "registry/base-sera/hooks/use-mobile.ts",
+          "type": "registry:hook"
+        }
+      ],
+      "type": "registry:hook"
+    },
+    {
+      "name": "font-geist",
+      "title": "Geist",
+      "type": "registry:font",
+      "font": {
+        "family": "'Geist Variable', sans-serif",
+        "provider": "google",
+        "import": "Geist",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/geist"
+      }
+    },
+    {
+      "name": "font-inter",
+      "title": "Inter",
+      "type": "registry:font",
+      "font": {
+        "family": "'Inter Variable', sans-serif",
+        "provider": "google",
+        "import": "Inter",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/inter"
+      }
+    },
+    {
+      "name": "font-noto-sans",
+      "title": "Noto Sans",
+      "type": "registry:font",
+      "font": {
+        "family": "'Noto Sans Variable', sans-serif",
+        "provider": "google",
+        "import": "Noto_Sans",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/noto-sans"
+      }
+    },
+    {
+      "name": "font-nunito-sans",
+      "title": "Nunito Sans",
+      "type": "registry:font",
+      "font": {
+        "family": "'Nunito Sans Variable', sans-serif",
+        "provider": "google",
+        "import": "Nunito_Sans",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/nunito-sans"
+      }
+    },
+    {
+      "name": "font-figtree",
+      "title": "Figtree",
+      "type": "registry:font",
+      "font": {
+        "family": "'Figtree Variable', sans-serif",
+        "provider": "google",
+        "import": "Figtree",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/figtree"
+      }
+    },
+    {
+      "name": "font-roboto",
+      "title": "Roboto",
+      "type": "registry:font",
+      "font": {
+        "family": "'Roboto Variable', sans-serif",
+        "provider": "google",
+        "import": "Roboto",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/roboto"
+      }
+    },
+    {
+      "name": "font-raleway",
+      "title": "Raleway",
+      "type": "registry:font",
+      "font": {
+        "family": "'Raleway Variable', sans-serif",
+        "provider": "google",
+        "import": "Raleway",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/raleway"
+      }
+    },
+    {
+      "name": "font-dm-sans",
+      "title": "DM Sans",
+      "type": "registry:font",
+      "font": {
+        "family": "'DM Sans Variable', sans-serif",
+        "provider": "google",
+        "import": "DM_Sans",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/dm-sans"
+      }
+    },
+    {
+      "name": "font-public-sans",
+      "title": "Public Sans",
+      "type": "registry:font",
+      "font": {
+        "family": "'Public Sans Variable', sans-serif",
+        "provider": "google",
+        "import": "Public_Sans",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/public-sans"
+      }
+    },
+    {
+      "name": "font-outfit",
+      "title": "Outfit",
+      "type": "registry:font",
+      "font": {
+        "family": "'Outfit Variable', sans-serif",
+        "provider": "google",
+        "import": "Outfit",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/outfit"
+      }
+    },
+    {
+      "name": "font-oxanium",
+      "title": "Oxanium",
+      "type": "registry:font",
+      "font": {
+        "family": "'Oxanium Variable', sans-serif",
+        "provider": "google",
+        "import": "Oxanium",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/oxanium"
+      }
+    },
+    {
+      "name": "font-manrope",
+      "title": "Manrope",
+      "type": "registry:font",
+      "font": {
+        "family": "'Manrope Variable', sans-serif",
+        "provider": "google",
+        "import": "Manrope",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/manrope"
+      }
+    },
+    {
+      "name": "font-space-grotesk",
+      "title": "Space Grotesk",
+      "type": "registry:font",
+      "font": {
+        "family": "'Space Grotesk Variable', sans-serif",
+        "provider": "google",
+        "import": "Space_Grotesk",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/space-grotesk"
+      }
+    },
+    {
+      "name": "font-montserrat",
+      "title": "Montserrat",
+      "type": "registry:font",
+      "font": {
+        "family": "'Montserrat Variable', sans-serif",
+        "provider": "google",
+        "import": "Montserrat",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/montserrat"
+      }
+    },
+    {
+      "name": "font-ibm-plex-sans",
+      "title": "IBM Plex Sans",
+      "type": "registry:font",
+      "font": {
+        "family": "'IBM Plex Sans Variable', sans-serif",
+        "provider": "google",
+        "import": "IBM_Plex_Sans",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/ibm-plex-sans"
+      }
+    },
+    {
+      "name": "font-source-sans-3",
+      "title": "Source Sans 3",
+      "type": "registry:font",
+      "font": {
+        "family": "'Source Sans 3 Variable', sans-serif",
+        "provider": "google",
+        "import": "Source_Sans_3",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/source-sans-3"
+      }
+    },
+    {
+      "name": "font-instrument-sans",
+      "title": "Instrument Sans",
+      "type": "registry:font",
+      "font": {
+        "family": "'Instrument Sans Variable', sans-serif",
+        "provider": "google",
+        "import": "Instrument_Sans",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/instrument-sans"
+      }
+    },
+    {
+      "name": "font-jetbrains-mono",
+      "title": "JetBrains Mono",
+      "type": "registry:font",
+      "font": {
+        "family": "'JetBrains Mono Variable', monospace",
+        "provider": "google",
+        "import": "JetBrains_Mono",
+        "variable": "--font-mono",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/jetbrains-mono"
+      }
+    },
+    {
+      "name": "font-geist-mono",
+      "title": "Geist Mono",
+      "type": "registry:font",
+      "font": {
+        "family": "'Geist Mono Variable', monospace",
+        "provider": "google",
+        "import": "Geist_Mono",
+        "variable": "--font-mono",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/geist-mono"
+      }
+    },
+    {
+      "name": "font-noto-serif",
+      "title": "Noto Serif",
+      "type": "registry:font",
+      "font": {
+        "family": "'Noto Serif Variable', serif",
+        "provider": "google",
+        "import": "Noto_Serif",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/noto-serif"
+      }
+    },
+    {
+      "name": "font-roboto-slab",
+      "title": "Roboto Slab",
+      "type": "registry:font",
+      "font": {
+        "family": "'Roboto Slab Variable', serif",
+        "provider": "google",
+        "import": "Roboto_Slab",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/roboto-slab"
+      }
+    },
+    {
+      "name": "font-merriweather",
+      "title": "Merriweather",
+      "type": "registry:font",
+      "font": {
+        "family": "'Merriweather Variable', serif",
+        "provider": "google",
+        "import": "Merriweather",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/merriweather"
+      }
+    },
+    {
+      "name": "font-lora",
+      "title": "Lora",
+      "type": "registry:font",
+      "font": {
+        "family": "'Lora Variable', serif",
+        "provider": "google",
+        "import": "Lora",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/lora"
+      }
+    },
+    {
+      "name": "font-playfair-display",
+      "title": "Playfair Display",
+      "type": "registry:font",
+      "font": {
+        "family": "'Playfair Display Variable', serif",
+        "provider": "google",
+        "import": "Playfair_Display",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/playfair-display"
+      }
+    },
+    {
+      "name": "font-eb-garamond",
+      "title": "EB Garamond",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
+    },
+    {
+      "name": "font-heading-geist",
+      "title": "Geist (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Geist Variable', sans-serif",
+        "provider": "google",
+        "import": "Geist",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/geist"
+      }
+    },
+    {
+      "name": "font-heading-inter",
+      "title": "Inter (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Inter Variable', sans-serif",
+        "provider": "google",
+        "import": "Inter",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/inter"
+      }
+    },
+    {
+      "name": "font-heading-noto-sans",
+      "title": "Noto Sans (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Noto Sans Variable', sans-serif",
+        "provider": "google",
+        "import": "Noto_Sans",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/noto-sans"
+      }
+    },
+    {
+      "name": "font-heading-nunito-sans",
+      "title": "Nunito Sans (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Nunito Sans Variable', sans-serif",
+        "provider": "google",
+        "import": "Nunito_Sans",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/nunito-sans"
+      }
+    },
+    {
+      "name": "font-heading-figtree",
+      "title": "Figtree (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Figtree Variable', sans-serif",
+        "provider": "google",
+        "import": "Figtree",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/figtree"
+      }
+    },
+    {
+      "name": "font-heading-roboto",
+      "title": "Roboto (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Roboto Variable', sans-serif",
+        "provider": "google",
+        "import": "Roboto",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/roboto"
+      }
+    },
+    {
+      "name": "font-heading-raleway",
+      "title": "Raleway (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Raleway Variable', sans-serif",
+        "provider": "google",
+        "import": "Raleway",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/raleway"
+      }
+    },
+    {
+      "name": "font-heading-dm-sans",
+      "title": "DM Sans (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'DM Sans Variable', sans-serif",
+        "provider": "google",
+        "import": "DM_Sans",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/dm-sans"
+      }
+    },
+    {
+      "name": "font-heading-public-sans",
+      "title": "Public Sans (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Public Sans Variable', sans-serif",
+        "provider": "google",
+        "import": "Public_Sans",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/public-sans"
+      }
+    },
+    {
+      "name": "font-heading-outfit",
+      "title": "Outfit (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Outfit Variable', sans-serif",
+        "provider": "google",
+        "import": "Outfit",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/outfit"
+      }
+    },
+    {
+      "name": "font-heading-oxanium",
+      "title": "Oxanium (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Oxanium Variable', sans-serif",
+        "provider": "google",
+        "import": "Oxanium",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/oxanium"
+      }
+    },
+    {
+      "name": "font-heading-manrope",
+      "title": "Manrope (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Manrope Variable', sans-serif",
+        "provider": "google",
+        "import": "Manrope",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/manrope"
+      }
+    },
+    {
+      "name": "font-heading-space-grotesk",
+      "title": "Space Grotesk (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Space Grotesk Variable', sans-serif",
+        "provider": "google",
+        "import": "Space_Grotesk",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/space-grotesk"
+      }
+    },
+    {
+      "name": "font-heading-montserrat",
+      "title": "Montserrat (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Montserrat Variable', sans-serif",
+        "provider": "google",
+        "import": "Montserrat",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/montserrat"
+      }
+    },
+    {
+      "name": "font-heading-ibm-plex-sans",
+      "title": "IBM Plex Sans (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'IBM Plex Sans Variable', sans-serif",
+        "provider": "google",
+        "import": "IBM_Plex_Sans",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/ibm-plex-sans"
+      }
+    },
+    {
+      "name": "font-heading-source-sans-3",
+      "title": "Source Sans 3 (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Source Sans 3 Variable', sans-serif",
+        "provider": "google",
+        "import": "Source_Sans_3",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/source-sans-3"
+      }
+    },
+    {
+      "name": "font-heading-instrument-sans",
+      "title": "Instrument Sans (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Instrument Sans Variable', sans-serif",
+        "provider": "google",
+        "import": "Instrument_Sans",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/instrument-sans"
+      }
+    },
+    {
+      "name": "font-heading-jetbrains-mono",
+      "title": "JetBrains Mono (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'JetBrains Mono Variable', monospace",
+        "provider": "google",
+        "import": "JetBrains_Mono",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/jetbrains-mono"
+      }
+    },
+    {
+      "name": "font-heading-geist-mono",
+      "title": "Geist Mono (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Geist Mono Variable', monospace",
+        "provider": "google",
+        "import": "Geist_Mono",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/geist-mono"
+      }
+    },
+    {
+      "name": "font-heading-noto-serif",
+      "title": "Noto Serif (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Noto Serif Variable', serif",
+        "provider": "google",
+        "import": "Noto_Serif",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/noto-serif"
+      }
+    },
+    {
+      "name": "font-heading-roboto-slab",
+      "title": "Roboto Slab (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Roboto Slab Variable', serif",
+        "provider": "google",
+        "import": "Roboto_Slab",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/roboto-slab"
+      }
+    },
+    {
+      "name": "font-heading-merriweather",
+      "title": "Merriweather (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Merriweather Variable', serif",
+        "provider": "google",
+        "import": "Merriweather",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/merriweather"
+      }
+    },
+    {
+      "name": "font-heading-lora",
+      "title": "Lora (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Lora Variable', serif",
+        "provider": "google",
+        "import": "Lora",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/lora"
+      }
+    },
+    {
+      "name": "font-heading-playfair-display",
+      "title": "Playfair Display (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Playfair Display Variable', serif",
+        "provider": "google",
+        "import": "Playfair_Display",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/playfair-display"
+      }
+    },
+    {
+      "name": "font-heading-eb-garamond",
+      "title": "EB Garamond (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
+    }
+  ]
+}
diff --git a/apps/v4/public/r/styles/base-sera/resizable-example.json b/apps/v4/public/r/styles/base-sera/resizable-example.json
new file mode 100644
index 0000000000..4c65f3f2cc
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/resizable-example.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-example",
+  "title": "Resizable",
+  "registryDependencies": [
+    "resizable",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/resizable-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/base-sera/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/resizable.json b/apps/v4/public/r/styles/base-sera/resizable.json
new file mode 100644
index 0000000000..0ccca126b1
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/resizable.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable",
+  "dependencies": [
+    "react-resizable-panels"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/ui/resizable.tsx",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"z-10 flex h-6 w-1 shrink-0 rounded-none bg-border\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/resizable",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/resizable-example.tsx",
+      "api": "https://github.com/bvaughn/react-resizable-panels"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/scroll-area-example.json b/apps/v4/public/r/styles/base-sera/scroll-area-example.json
new file mode 100644
index 0000000000..34a295e078
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/scroll-area-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll-area-example",
+  "title": "Scroll Area",
+  "registryDependencies": [
+    "scroll-area",
+    "separator",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/scroll-area-example.tsx",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/base-sera/ui/scroll-area\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 rounded-md border style-luma:rounded-2xl\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 rounded-md border p-4 style-luma:rounded-2xl\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n                Photo by{\" \"}\n                <span className=\"font-semibold text-foreground\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/scroll-area.json b/apps/v4/public/r/styles/base-sera/scroll-area.json
new file mode 100644
index 0000000000..ffafece59d
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/scroll-area.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll-area",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/scroll-area.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: ScrollAreaPrimitive.Root.Props) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-none bg-border\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/scroll-area",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/scroll-area-example.tsx",
+      "api": "https://base-ui.com/react/components/scroll-area.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/select-example.json b/apps/v4/public/r/styles/base-sera/select-example.json
new file mode 100644
index 0000000000..630b92cb10
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/select-example.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select-example",
+  "title": "Select",
+  "registryDependencies": [
+    "button",
+    "dialog",
+    "field",
+    "input",
+    "item",
+    "native-select",
+    "select",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/select-example.tsx",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-sera/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-sera/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-sera/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-sera/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectSides />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSides() {\n  const items = [\n    { label: \"Select\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Select key={side} items={items}>\n            <SelectTrigger className=\"w-28 capitalize\">\n              <SelectValue placeholder={side.replace(\"-\", \" \")} />\n            </SelectTrigger>\n            <SelectContent side={side} alignItemWithTrigger={false}>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartBarIcon\"\n            remixicon=\"RiBarChartLine\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/select.json b/apps/v4/public/r/styles/base-sera/select.json
new file mode 100644
index 0000000000..f1ca66b4d0
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/select.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/select.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1.5 p-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-none border border-transparent border-b-input bg-transparent px-0 py-2 text-sm whitespace-nowrap transition-[color,border-color] outline-none focus-visible:border-b-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive data-placeholder:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-b-destructive/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n            className=\"pointer-events-none size-4 text-muted-foreground\"\n          />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          data-align-trigger={alignItemWithTrigger}\n          className={cn(\n            \"cn-menu-target cn-menu-translucent relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\n        \"px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 shrink-0 gap-2 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={\n          <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n        }\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n          className=\"pointer-events-none\"\n        />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\n        \"pointer-events-none -mx-1.5 my-1.5 h-px bg-border\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n        phosphor=\"CaretUpIcon\"\n        remixicon=\"RiArrowUpSLine\"\n      />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n      />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/select",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/select-example.tsx",
+      "api": "https://base-ui.com/react/components/select.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/separator-example.json b/apps/v4/public/r/styles/base-sera/separator-example.json
new file mode 100644
index 0000000000..a10655ea24
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/separator-example.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "separator-example",
+  "title": "Separator",
+  "registryDependencies": [
+    "separator",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/separator-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\n\nexport default function SeparatorExample() {\n  return (\n    <ExampleWrapper>\n      <SeparatorHorizontal />\n      <SeparatorVertical />\n      <SeparatorVerticalMenu />\n      <SeparatorInList />\n    </ExampleWrapper>\n  )\n}\n\nfunction SeparatorHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <div className=\"flex flex-col gap-4 text-sm style-lyra:text-xs/relaxed\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">shadcn/ui</div>\n          <div className=\"text-muted-foreground\">\n            The Foundation for your Design System\n          </div>\n        </div>\n        <Separator />\n        <div>\n          A set of beautifully designed components that you can customize,\n          extend, and build on.\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex h-5 items-center gap-4 text-sm style-lyra:text-xs/relaxed\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVerticalMenu() {\n  return (\n    <Example title=\"Vertical Menu\">\n      <div className=\"flex items-center gap-2 text-sm md:gap-4 style-lyra:text-xs/relaxed\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Settings</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Manage preferences\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Account</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Profile & security\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Help</span>\n          <span className=\"text-xs text-muted-foreground\">Support & docs</span>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorInList() {\n  return (\n    <Example title=\"In List\">\n      <div className=\"flex flex-col gap-2 text-sm style-lyra:text-xs/relaxed\">\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 1</dt>\n          <dd className=\"text-muted-foreground\">Value 1</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 2</dt>\n          <dd className=\"text-muted-foreground\">Value 2</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 3</dt>\n          <dd className=\"text-muted-foreground\">Value 3</dd>\n        </dl>\n      </div>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/separator.json b/apps/v4/public/r/styles/base-sera/separator.json
new file mode 100644
index 0000000000..e85d78ba86
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/separator.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "separator",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/separator.tsx",
+      "content": "\"use client\"\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: SeparatorPrimitive.Props) {\n  return (\n    <SeparatorPrimitive\n      data-slot=\"separator\"\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/separator",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/separator-example.tsx",
+      "api": "https://base-ui.com/react/components/separator.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sheet-example.json b/apps/v4/public/r/styles/base-sera/sheet-example.json
new file mode 100644
index 0000000000..68701ff6e8
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sheet-example.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sheet-example",
+  "title": "Sheet",
+  "registryDependencies": [
+    "button",
+    "field",
+    "input",
+    "sheet",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/sheet-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-sera/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>Open</SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose render={<Button variant=\"outline\" />}>Close</SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sheet.json b/apps/v4/public/r/styles/base-sera/sheet.json
new file mode 100644
index 0000000000..d75d140529
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sheet.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sheet",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/ui/sheet.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"fixed z-50 flex flex-col bg-popover bg-clip-padding text-sm text-popover-foreground shadow-md transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4 bg-secondary\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\n        \"cn-font-heading text-lg tracking-wider text-foreground uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\n        \"mt-0.5 text-sm leading-relaxed text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/sheet",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sheet-example.tsx",
+      "api": "https://base-ui.com/react/components/dialog.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sidebar-01.json b/apps/v4/public/r/styles/base-sera/sidebar-01.json
new file mode 100644
index 0000000000..acc290a956
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sidebar-01.json
@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-01",
+  "title": "Sidebar 01",
+  "description": "A simple sidebar with navigation grouped by section.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/sidebar-01/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/base-sera/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-01/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-sera/blocks/sidebar-01/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/base-sera/blocks/sidebar-01/components/version-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/base-sera/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        {data.navMain.map((item) => (\n          <SidebarGroup key={item.title}>\n            <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {item.items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      isActive={item.isActive}\n                      render={<a href={item.url} />}\n                    >\n                      {item.title}\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-01/components/search-form.tsx",
+      "content": "\"use client\"\n\nimport { Label } from \"@/registry/base-sera/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent className=\"relative\">\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            placeholder=\"Search the docs...\"\n            className=\"pl-8\"\n          />\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n          />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-01/components/version-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            <div className=\"flex flex-col gap-0.5 leading-none\">\n              <span className=\"font-medium\">Documentation</span>\n              <span className=\"\">v{selectedVersion}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sidebar-02.json b/apps/v4/public/r/styles/base-sera/sidebar-02.json
new file mode 100644
index 0000000000..9ca5439a85
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sidebar-02.json
@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-02",
+  "title": "Sidebar 02",
+  "description": "A sidebar with collapsible sections.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/sidebar-02/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/base-sera/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-02/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-sera/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/base-sera/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-sera/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                render={<CollapsibleTrigger />}\n              >\n                {item.title}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-02/components/search-form.tsx",
+      "content": "\"use client\"\n\nimport { Label } from \"@/registry/base-sera/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent className=\"relative\">\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            placeholder=\"Search the docs...\"\n            className=\"pl-8\"\n          />\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n          />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-02/components/version-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            <div className=\"flex flex-col gap-0.5 leading-none\">\n              <span className=\"font-medium\">Documentation</span>\n              <span className=\"\">v{selectedVersion}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sidebar-03.json b/apps/v4/public/r/styles/base-sera/sidebar-03.json
new file mode 100644
index 0000000000..1344a03f8d
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sidebar-03.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-03",
+  "title": "Sidebar 03",
+  "description": "A sidebar with submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/sidebar-03/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/base-sera/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-03/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton\n                  render={<a href={item.url} className=\"font-medium\" />}\n                >\n                  {item.title}\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sidebar-04.json b/apps/v4/public/r/styles/base-sera/sidebar-04.json
new file mode 100644
index 0000000000..44f2318c3a
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sidebar-04.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-04",
+  "title": "Sidebar 04",
+  "description": "A floating sidebar with submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/sidebar-04/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/base-sera/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-04/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton\n                  render={<a href={item.url} className=\"font-medium\" />}\n                >\n                  {item.title}\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sidebar-05.json b/apps/v4/public/r/styles/base-sera/sidebar-05.json
new file mode 100644
index 0000000000..3bc1ed2acf
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sidebar-05.json
@@ -0,0 +1,36 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-05",
+  "title": "Sidebar 05",
+  "description": "A sidebar with collapsible submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/sidebar-05/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/base-sera/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-05/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-sera/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-sera/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <SidebarMenuButton render={<CollapsibleTrigger />}>\n                    {item.title}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"PlusIcon\"\n                      tabler=\"IconPlus\"\n                      hugeicons=\"PlusSignIcon\"\n                      phosphor=\"PlusIcon\"\n                      remixicon=\"RiAddLine\"\n                      className=\"ml-auto group-aria-expanded/menu-button:hidden\"\n                    />\n                    <IconPlaceholder\n                      lucide=\"MinusIcon\"\n                      tabler=\"IconMinus\"\n                      hugeicons=\"MinusSignIcon\"\n                      phosphor=\"MinusIcon\"\n                      remixicon=\"RiSubtractLine\"\n                      className=\"ml-auto hidden group-aria-expanded/menu-button:block\"\n                    />\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              isActive={item.isActive}\n                              render={<a href={item.url} />}\n                            >\n                              {item.title}\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-05/components/search-form.tsx",
+      "content": "\"use client\"\n\nimport { Label } from \"@/registry/base-sera/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent className=\"relative\">\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            placeholder=\"Search the docs...\"\n            className=\"pl-8\"\n          />\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n          />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sidebar-06.json b/apps/v4/public/r/styles/base-sera/sidebar-06.json
new file mode 100644
index 0000000000..aa643e060b
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sidebar-06.json
@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-06",
+  "title": "Sidebar 06",
+  "description": "A sidebar with submenus as dropdowns.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "card",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/sidebar-06/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/base-sera/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-06/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-sera/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/base-sera/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-06/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarGroup>\n      <SidebarMenu>\n        {items.map((item) => (\n          <DropdownMenu key={item.title}>\n            <SidebarMenuItem>\n              <DropdownMenuTrigger\n                render={\n                  <SidebarMenuButton className=\"aria-expanded:bg-muted\" />\n                }\n              >\n                {item.title}{\" \"}\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeOutlineIcon\"\n                  remixicon=\"RiMoreLine\"\n                  className=\"ml-auto\"\n                />\n              </DropdownMenuTrigger>\n              {item.items?.length ? (\n                <DropdownMenuContent\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align={isMobile ? \"end\" : \"start\"}\n                  className=\"min-w-56 rounded-lg\"\n                >\n                  {item.items.map((item) => (\n                    <DropdownMenuItem\n                      key={item.title}\n                      render={<a href={item.url} />}\n                    >\n                      {item.title}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              ) : null}\n            </SidebarMenuItem>\n          </DropdownMenu>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+      "content": "import { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-sera/ui/card\"\nimport { SidebarInput } from \"@/registry/base-sera/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\">\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sidebar-07.json b/apps/v4/public/r/styles/base-sera/sidebar-07.json
new file mode 100644
index 0000000000..33767be89b
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sidebar-07.json
@@ -0,0 +1,52 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-07",
+  "title": "Sidebar 07",
+  "description": "A sidebar that collapses to icons.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/sidebar-07/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/base-sera/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-07/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-sera/blocks/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-sera/blocks/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"@/registry/base-sera/blocks/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"@/registry/base-sera/blocks/sidebar-07/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: (\n        <IconPlaceholder\n          lucide=\"AudioLinesIcon\"\n          tabler=\"IconWaveSine\"\n          hugeicons=\"AudioWave01Icon\"\n          phosphor=\"WaveformIcon\"\n          remixicon=\"RiPulseLine\"\n        />\n      ),\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: (\n        <IconPlaceholder\n          lucide=\"TerminalIcon\"\n          tabler=\"IconCommand\"\n          hugeicons=\"CommandIcon\"\n          phosphor=\"CommandIcon\"\n          remixicon=\"RiCommandLine\"\n        />\n      ),\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"icon\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-07/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-sera/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible\n            key={item.title}\n            defaultOpen={item.isActive}\n            className=\"group/collapsible\"\n            render={<SidebarMenuItem />}\n          >\n            <CollapsibleTrigger\n              render={<SidebarMenuButton tooltip={item.title} />}\n            >\n              {item.icon}\n              <span>{item.title}</span>\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className=\"ml-auto transition-transform duration-200 group-data-open/collapsible:rotate-90\"\n              />\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                {item.items?.map((subItem) => (\n                  <SidebarMenuSubItem key={subItem.title}>\n                    <SidebarMenuSubButton render={<a href={subItem.url} />}>\n                      <span>{subItem.title}</span>\n                    </SidebarMenuSubButton>\n                  </SidebarMenuSubItem>\n                ))}\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-07/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: React.ReactNode\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton render={<a href={item.url} />}>\n              {item.icon}\n              <span>{item.name}</span>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <SidebarMenuAction\n                    showOnHover\n                    className=\"aria-expanded:bg-muted\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeOutlineIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowForward\"\n                    hugeicons=\"ArrowRightIcon\"\n                    phosphor=\"ShareFatIcon\"\n                    remixicon=\"RiShareForwardLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"Trash2Icon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n              className=\"text-sidebar-foreground/70\"\n            />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-07/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-sera/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton size=\"lg\" className=\"aria-expanded:bg-muted\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"truncate text-xs\">{user.email}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                  <Avatar>\n                    <AvatarImage src={user.avatar} alt={user.name} />\n                    <AvatarFallback>CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">{user.name}</span>\n                    <span className=\"truncate text-xs\">{user.email}</span>\n                  </div>\n                </div>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BadgeCheckIcon\"\n                  tabler=\"IconRosetteDiscountCheck\"\n                  hugeicons=\"CheckmarkBadgeIcon\"\n                  phosphor=\"CheckCircleIcon\"\n                  remixicon=\"RiCheckboxCircleLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconBell\"\n                  hugeicons=\"NotificationIcon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotificationLine\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-07/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              {activeTeam.logo}\n            </div>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"font-medium text-muted-foreground\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sidebar-08.json b/apps/v4/public/r/styles/base-sera/sidebar-08.json
new file mode 100644
index 0000000000..2f4297eaf4
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sidebar-08.json
@@ -0,0 +1,52 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-08",
+  "title": "Sidebar 08",
+  "description": "An inset sidebar with secondary navigation.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/sidebar-08/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/base-sera/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-08/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-sera/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-sera/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/base-sera/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-sera/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconCommand\"\n                  hugeicons=\"CommandIcon\"\n                  phosphor=\"CommandIcon\"\n                  remixicon=\"RiCommandLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">Acme Inc</span>\n                <span className=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-08/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-sera/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: React.ReactNode\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible\n            key={item.title}\n            defaultOpen={item.isActive}\n            render={<SidebarMenuItem />}\n          >\n            <SidebarMenuButton\n              tooltip={item.title}\n              render={<a href={item.url} />}\n            >\n              {item.icon}\n              <span>{item.title}</span>\n            </SidebarMenuButton>\n            {item.items?.length ? (\n              <>\n                <CollapsibleTrigger\n                  render={\n                    <SidebarMenuAction className=\"aria-expanded:rotate-90\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                  <span className=\"sr-only\">Toggle</span>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {item.items?.map((subItem) => (\n                      <SidebarMenuSubItem key={subItem.title}>\n                        <SidebarMenuSubButton render={<a href={subItem.url} />}>\n                          <span>{subItem.title}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </>\n            ) : null}\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-08/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: React.ReactNode\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton render={<a href={item.url} />}>\n              {item.icon}\n              <span>{item.name}</span>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <SidebarMenuAction\n                    showOnHover\n                    className=\"aria-expanded:bg-muted\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeOutlineIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare2\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"Trash2Icon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n            />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-08/components/nav-secondary.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton size=\"sm\" render={<a href={item.url} />}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-08/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-sera/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton size=\"lg\" className=\"aria-expanded:bg-muted\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"truncate text-xs\">{user.email}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                  <Avatar>\n                    <AvatarImage src={user.avatar} alt={user.name} />\n                    <AvatarFallback>CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">{user.name}</span>\n                    <span className=\"truncate text-xs\">{user.email}</span>\n                  </div>\n                </div>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BadgeCheckIcon\"\n                  tabler=\"IconRosetteDiscountCheck\"\n                  hugeicons=\"CheckmarkBadgeIcon\"\n                  phosphor=\"CheckCircleIcon\"\n                  remixicon=\"RiCheckboxCircleLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconBell\"\n                  hugeicons=\"NotificationIcon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotificationLine\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sidebar-09.json b/apps/v4/public/r/styles/base-sera/sidebar-09.json
new file mode 100644
index 0000000000..dde3c5a3cf
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sidebar-09.json
@@ -0,0 +1,39 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-09",
+  "title": "Sidebar 09",
+  "description": "Collapsible nested sidebars.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "switch",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/sidebar-09/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/base-sera/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-09/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavUser } from \"@/registry/base-sera/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/base-sera/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { Switch } from \"@/registry/base-sera/ui/switch\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"FileIcon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArchiveXIcon\"\n          tabler=\"IconArchiveOff\"\n          hugeicons=\"ArchiveIcon\"\n          phosphor=\"ArchiveIcon\"\n          remixicon=\"RiArchiveLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"md:h-8 md:p-0\"\n                render={<a href=\"#\" />}\n              >\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-base font-medium text-foreground\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-09/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-sera/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"md:h-8 md:p-0 data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <Avatar className=\"h-8 w-8 rounded-lg\">\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"truncate text-xs\">{user.email}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BadgeCheckIcon\"\n                  tabler=\"IconRosetteDiscountCheck\"\n                  hugeicons=\"CheckmarkBadgeIcon\"\n                  phosphor=\"CheckCircleIcon\"\n                  remixicon=\"RiCheckboxCircleLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconBell\"\n                  hugeicons=\"NotificationIcon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotificationLine\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sidebar-10.json b/apps/v4/public/r/styles/base-sera/sidebar-10.json
new file mode 100644
index 0000000000..1ff6c0c8c8
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sidebar-10.json
@@ -0,0 +1,62 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-10",
+  "title": "Sidebar 10",
+  "description": "A sidebar in a popover.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/sidebar-10/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/base-sera/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/base-sera/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-10/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavFavorites } from \"@/registry/base-sera/blocks/sidebar-10/components/nav-favorites\"\nimport { NavMain } from \"@/registry/base-sera/blocks/sidebar-10/components/nav-main\"\nimport { NavSecondary } from \"@/registry/base-sera/blocks/sidebar-10/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/registry/base-sera/blocks/sidebar-10/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/registry/base-sera/blocks/sidebar-10/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: (\n        <IconPlaceholder\n          lucide=\"TerminalIcon\"\n          tabler=\"IconCommand\"\n          hugeicons=\"CommandIcon\"\n          phosphor=\"CommandIcon\"\n          remixicon=\"RiCommandLine\"\n        />\n      ),\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: (\n        <IconPlaceholder\n          lucide=\"AudioLinesIcon\"\n          tabler=\"IconWaveSine\"\n          hugeicons=\"AudioWave01Icon\"\n          phosphor=\"WaveformIcon\"\n          remixicon=\"RiPulseLine\"\n        />\n      ),\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: (\n        <IconPlaceholder\n          lucide=\"TerminalIcon\"\n          tabler=\"IconCommand\"\n          hugeicons=\"CommandIcon\"\n          phosphor=\"CommandIcon\"\n          remixicon=\"RiCommandLine\"\n        />\n      ),\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SearchIcon\"\n          tabler=\"IconSearch\"\n          hugeicons=\"SearchIcon\"\n          phosphor=\"MagnifyingGlassIcon\"\n          remixicon=\"RiSearchLine\"\n        />\n      ),\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SparklesIcon\"\n          tabler=\"IconSparkles\"\n          hugeicons=\"SparklesIcon\"\n          phosphor=\"SparkleIcon\"\n          remixicon=\"RiSparklingLine\"\n        />\n      ),\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CalendarIcon\"\n          tabler=\"IconCalendar\"\n          hugeicons=\"CalendarIcon\"\n          phosphor=\"CalendarIcon\"\n          remixicon=\"RiCalendarLine\"\n        />\n      ),\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BlocksIcon\"\n          tabler=\"IconCube\"\n          hugeicons=\"CubeIcon\"\n          phosphor=\"CubeIcon\"\n          remixicon=\"RiBox3Line\"\n        />\n      ),\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleQuestionIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageQuestionIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiQuestionLine\"\n        />\n      ),\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n        <NavMain items={data.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={data.favorites} />\n        <NavWorkspaces workspaces={data.workspaces} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-10/components/nav-actions.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-sera/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileText\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      label: \"Duplicate\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CopyIcon\"\n          tabler=\"IconCopy\"\n          hugeicons=\"Copy01Icon\"\n          phosphor=\"CopyIcon\"\n          remixicon=\"RiFileCopyLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpRightIcon\"\n          tabler=\"IconCornerUpRight\"\n          hugeicons=\"RedoIcon\"\n          phosphor=\"ArrowBendUpRightIcon\"\n          remixicon=\"RiCornerUpRightLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to Trash\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpLeftIcon\"\n          tabler=\"IconCornerUpLeft\"\n          hugeicons=\"UndoIcon\"\n          phosphor=\"ArrowBendUpLeftIcon\"\n          remixicon=\"RiCornerUpLeftLine\"\n        />\n      ),\n    },\n    {\n      label: \"View analytics\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartLineIcon\"\n          tabler=\"IconChartLine\"\n          hugeicons=\"ChartIcon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiLineChartLine\"\n        />\n      ),\n    },\n    {\n      label: \"Version History\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n    },\n    {\n      label: \"Show delete pages\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TrashIcon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"DeleteIcon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      label: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowUpIcon\"\n          tabler=\"IconArrowUp\"\n          hugeicons=\"ArrowUpIcon\"\n          phosphor=\"ArrowUpIcon\"\n          remixicon=\"RiArrowUpLine\"\n        />\n      ),\n    },\n    {\n      label: \"Export\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowDownIcon\"\n          tabler=\"IconArrowDown\"\n          hugeicons=\"ArrowDownIcon\"\n          phosphor=\"ArrowDownIcon\"\n          remixicon=\"RiArrowDownLine\"\n        />\n      ),\n    },\n  ],\n]\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <IconPlaceholder\n          lucide=\"StarIcon\"\n          tabler=\"IconStar\"\n          hugeicons=\"StarIcon\"\n          phosphor=\"StarIcon\"\n          remixicon=\"RiStarLine\"\n        />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"h-7 w-7 data-open:bg-accent\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"MoreHorizontalIcon\"\n            tabler=\"IconDots\"\n            hugeicons=\"MoreHorizontalCircle01Icon\"\n            phosphor=\"DotsThreeOutlineIcon\"\n            remixicon=\"RiMoreLine\"\n          />\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            {item.icon} <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-10/components/nav-favorites.tsx",
+      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton render={<a href={item.url} title={item.name} />}>\n              <span>{item.emoji}</span>\n              <span>{item.name}</span>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <SidebarMenuAction\n                    showOnHover\n                    className=\"aria-expanded:bg-muted\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeOutlineIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"StarOffIcon\"\n                      tabler=\"IconStarOff\"\n                      hugeicons=\"StarOffIcon\"\n                      phosphor=\"StarIcon\"\n                      remixicon=\"RiStarOffLine\"\n                      className=\"text-muted-foreground\"\n                    />\n                    <span>Remove from Favorites</span>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                      phosphor=\"LinkIcon\"\n                      remixicon=\"RiLinksLine\"\n                      className=\"text-muted-foreground\"\n                    />\n                    <span>Copy Link</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArrowUpRightIcon\"\n                      tabler=\"IconArrowUpRight\"\n                      hugeicons=\"ArrowUpRightIcon\"\n                      phosphor=\"ArrowUpRightIcon\"\n                      remixicon=\"RiArrowRightUpLine\"\n                      className=\"text-muted-foreground\"\n                    />\n                    <span>Open in New Tab</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                      remixicon=\"RiDeleteBinLine\"\n                      className=\"text-muted-foreground\"\n                    />\n                    <span>Delete</span>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n            />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-10/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: React.ReactNode\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton\n            isActive={item.isActive}\n            render={<a href={item.url} />}\n          >\n            {item.icon}\n            <span>{item.title}</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-10/components/nav-secondary.tsx",
+      "content": "\"use client\"\n\nimport React from \"react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: React.ReactNode\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton render={<a href={item.url} />}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-10/components/nav-workspaces.tsx",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-sera/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton render={<a href=\"#\" />}>\n                  <span>{workspace.emoji}</span>\n                  <span>{workspace.name}</span>\n                </SidebarMenuButton>\n                <SidebarMenuAction\n                  render={<CollapsibleTrigger />}\n                  className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-open:rotate-90\"\n                  showOnHover\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </SidebarMenuAction>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton render={<a href=\"#\" />}>\n                          <span>{page.emoji}</span>\n                          <span>{page.name}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-10/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<SidebarMenuButton className=\"w-fit px-1.5\" />}\n          >\n            <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              {activeTeam.logo}\n            </div>\n            <span className=\"truncate font-medium\">{activeTeam.name}</span>\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"opacity-50\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"font-medium text-muted-foreground\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sidebar-11.json b/apps/v4/public/r/styles/base-sera/sidebar-11.json
new file mode 100644
index 0000000000..e712af44ec
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sidebar-11.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-11",
+  "title": "Sidebar 11",
+  "description": "A sidebar with a collapsible file tree.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/sidebar-11/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/base-sera/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-11/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-sera/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarRail,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: \"README.md\",\n      state: \"M\",\n    },\n    {\n      file: \"api/hello/route.ts\",\n      state: \"U\",\n    },\n    {\n      file: \"app/layout.tsx\",\n      state: \"M\",\n    },\n  ],\n  tree: [\n    [\n      \"app\",\n      [\n        \"api\",\n        [\"hello\", [\"route.ts\"]],\n        \"page.tsx\",\n        \"layout.tsx\",\n        [\"blog\", [\"page.tsx\"]],\n      ],\n    ],\n    [\n      \"components\",\n      [\"ui\", \"button.tsx\", \"card.tsx\"],\n      \"header.tsx\",\n      \"footer.tsx\",\n    ],\n    [\"lib\", [\"util.ts\"]],\n    [\"public\", \"favicon.ico\", \"vercel.svg\"],\n    \".eslintrc.json\",\n    \".gitignore\",\n    \"next.config.js\",\n    \"tailwind.config.js\",\n    \"package.json\",\n    \"README.md\",\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Changes</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.changes.map((item, index) => (\n                <SidebarMenuItem key={index}>\n                  <SidebarMenuButton>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    {item.file}\n                  </SidebarMenuButton>\n                  <SidebarMenuBadge>{item.state}</SidebarMenuBadge>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n        <SidebarGroup>\n          <SidebarGroupLabel>Files</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.tree.map((item, index) => (\n                <Tree key={index} item={item} />\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\ntype TreeItem = string | TreeItem[]\nfunction Tree({ item }: { item: TreeItem }) {\n  const [name, ...items] = Array.isArray(item) ? item : [item]\n  if (!items.length) {\n    return (\n      <SidebarMenuButton\n        isActive={name === \"button.tsx\"}\n        className=\"data-[active=true]:bg-transparent\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"FileIcon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        {name}\n      </SidebarMenuButton>\n    )\n  }\n  return (\n    <SidebarMenuItem>\n      <Collapsible\n        className=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n        defaultOpen={name === \"components\" || name === \"ui\"}\n      >\n        <SidebarMenuButton render={<CollapsibleTrigger />}>\n          <IconPlaceholder\n            lucide=\"ChevronRightIcon\"\n            tabler=\"IconChevronRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"CaretRightIcon\"\n            remixicon=\"RiArrowRightSLine\"\n            className=\"transition-transform\"\n          />\n          <IconPlaceholder\n            lucide=\"FolderIcon\"\n            tabler=\"IconFolder\"\n            hugeicons=\"FolderIcon\"\n            phosphor=\"FolderIcon\"\n            remixicon=\"RiFolderLine\"\n          />\n          {name}\n        </SidebarMenuButton>\n        <CollapsibleContent>\n          <SidebarMenuSub>\n            {items.map((subItem, index) => (\n              <Tree key={index} item={subItem} />\n            ))}\n          </SidebarMenuSub>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarMenuItem>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sidebar-12.json b/apps/v4/public/r/styles/base-sera/sidebar-12.json
new file mode 100644
index 0000000000..cba418331b
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sidebar-12.json
@@ -0,0 +1,48 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-12",
+  "title": "Sidebar 12",
+  "description": "A sidebar with a calendar.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "calendar",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/sidebar-12/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/base-sera/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-12/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/base-sera/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/base-sera/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/base-sera/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-12/components/calendars.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-sera/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                render={<CollapsibleTrigger />}\n              >\n                {calendar.name}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-12/components/date-picker.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Calendar } from \"@/registry/base-sera/ui/calendar\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport function DatePicker() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          captionLayout=\"dropdown\"\n          className=\"bg-transparent [--cell-size:2.1rem]\"\n        />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-12/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-sera/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton size=\"lg\" className=\"aria-expanded:bg-muted\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"truncate text-xs\">{user.email}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                  <Avatar>\n                    <AvatarImage src={user.avatar} alt={user.name} />\n                    <AvatarFallback>CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">{user.name}</span>\n                    <span className=\"truncate text-xs\">{user.email}</span>\n                  </div>\n                </div>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BadgeCheckIcon\"\n                  tabler=\"IconRosetteDiscountCheck\"\n                  hugeicons=\"CheckmarkBadgeIcon\"\n                  phosphor=\"CheckCircleIcon\"\n                  remixicon=\"RiCheckboxCircleLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconBell\"\n                  hugeicons=\"NotificationIcon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotificationLine\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sidebar-13.json b/apps/v4/public/r/styles/base-sera/sidebar-13.json
new file mode 100644
index 0000000000..0ae182bb7c
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sidebar-13.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-13",
+  "title": "Sidebar 13",
+  "description": "A sidebar in a dialog.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "button",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/sidebar-13/page.tsx",
+      "content": "import { SettingsDialog } from \"@/registry/base-sera/blocks/sidebar-13/components/settings-dialog\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex h-svh items-center justify-center\">\n      <SettingsDialog />\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-13/components/settings-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-sera/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-sera/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  nav: [\n    {\n      name: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n    {\n      name: \"Navigation\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MenuIcon\"\n          tabler=\"IconMenu\"\n          hugeicons=\"Menu09Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiMenuLine\"\n        />\n      ),\n    },\n    {\n      name: \"Home\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n    },\n    {\n      name: \"Appearance\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PaintbrushIcon\"\n          tabler=\"IconPalette\"\n          hugeicons=\"PaintBoardIcon\"\n          phosphor=\"PaletteIcon\"\n          remixicon=\"RiPaletteLine\"\n        />\n      ),\n    },\n    {\n      name: \"Messages & media\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiChat1Line\"\n        />\n      ),\n    },\n    {\n      name: \"Language & region\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GlobeIcon\"\n          tabler=\"IconWorld\"\n          hugeicons=\"Globe02Icon\"\n          phosphor=\"GlobeIcon\"\n          remixicon=\"RiGlobalLine\"\n        />\n      ),\n    },\n    {\n      name: \"Accessibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"KeyboardIcon\"\n          tabler=\"IconKeyboard\"\n          hugeicons=\"KeyboardIcon\"\n          phosphor=\"KeyboardIcon\"\n          remixicon=\"RiKeyboardLine\"\n        />\n      ),\n    },\n    {\n      name: \"Mark as read\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      ),\n    },\n    {\n      name: \"Audio & video\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"VideoIcon\"\n          tabler=\"IconVideoPlus\"\n          hugeicons=\"RecordIcon\"\n          phosphor=\"VideoIcon\"\n          remixicon=\"RiVideoLine\"\n        />\n      ),\n    },\n    {\n      name: \"Connected accounts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      name: \"Privacy & visibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LockIcon\"\n          tabler=\"IconLock\"\n          hugeicons=\"ShieldIcon\"\n          phosphor=\"LockIcon\"\n          remixicon=\"RiLockLine\"\n        />\n      ),\n    },\n    {\n      name: \"Advanced\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SettingsIcon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"SettingsIcon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger render={<Button size=\"sm\" />}>Open Dialog</DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          isActive={item.name === \"Messages & media\"}\n                          render={<a href=\"#\" />}\n                        >\n                          {item.icon}\n                          <span>{item.name}</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({\n                length: 10,\n              }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sidebar-14.json b/apps/v4/public/r/styles/base-sera/sidebar-14.json
new file mode 100644
index 0000000000..ebd38821f7
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sidebar-14.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-14",
+  "title": "Sidebar 14",
+  "description": "A sidebar on the right.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/sidebar-14/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/base-sera/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-sera/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-14/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/base-sera/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <SidebarMenuItem key={item.title}>\n                  <SidebarMenuButton\n                    render={<a href={item.url} className=\"font-medium\" />}\n                  >\n                    {item.title}\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <SidebarMenuSub>\n                      {item.items.map((item) => (\n                        <SidebarMenuSubItem key={item.title}>\n                          <SidebarMenuSubButton\n                            isActive={item.isActive}\n                            render={<a href={item.url} />}\n                          >\n                            {item.title}\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  ) : null}\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sidebar-15.json b/apps/v4/public/r/styles/base-sera/sidebar-15.json
new file mode 100644
index 0000000000..f7e2064b60
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sidebar-15.json
@@ -0,0 +1,79 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-15",
+  "title": "Sidebar 15",
+  "description": "A left and right sidebar.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu",
+    "calendar",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/sidebar-15/page.tsx",
+      "content": "import { SidebarLeft } from \"@/registry/base-sera/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/base-sera/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-15/components/calendars.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-sera/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                render={<CollapsibleTrigger />}\n              >\n                {calendar.name}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-15/components/date-picker.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Calendar } from \"@/registry/base-sera/ui/calendar\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport function DatePicker() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          captionLayout=\"dropdown\"\n          className=\"bg-transparent [--cell-size:2.1rem]\"\n        />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-15/components/nav-favorites.tsx",
+      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton render={<a href={item.url} title={item.name} />}>\n              <span>{item.emoji}</span>\n              <span>{item.name}</span>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <SidebarMenuAction\n                    showOnHover\n                    className=\"aria-expanded:bg-muted\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeOutlineIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"StarOffIcon\"\n                    tabler=\"IconStarOff\"\n                    hugeicons=\"StarOffIcon\"\n                    phosphor=\"StarIcon\"\n                    remixicon=\"RiStarOffLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Remove from Favorites</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"LinkIcon\"\n                    tabler=\"IconLink\"\n                    hugeicons=\"LinkIcon\"\n                    phosphor=\"LinkIcon\"\n                    remixicon=\"RiLinksLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Copy Link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ArrowUpRightIcon\"\n                    tabler=\"IconArrowUpRight\"\n                    hugeicons=\"ArrowUpRightIcon\"\n                    phosphor=\"ArrowUpRightIcon\"\n                    remixicon=\"RiArrowRightUpLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Open in New Tab</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"Trash2Icon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n            />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-15/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: React.ReactNode\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton\n            isActive={item.isActive}\n            render={<a href={item.url} />}\n          >\n            {item.icon}\n            <span>{item.title}</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-15/components/nav-secondary.tsx",
+      "content": "\"use client\"\n\nimport React from \"react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: React.ReactNode\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton render={<a href={item.url} />}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-15/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-sera/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton size=\"lg\" className=\"aria-expanded:bg-muted\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"truncate text-xs\">{user.email}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                  <Avatar>\n                    <AvatarImage src={user.avatar} alt={user.name} />\n                    <AvatarFallback>CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">{user.name}</span>\n                    <span className=\"truncate text-xs\">{user.email}</span>\n                  </div>\n                </div>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BadgeCheckIcon\"\n                  tabler=\"IconRosetteDiscountCheck\"\n                  hugeicons=\"CheckmarkBadgeIcon\"\n                  phosphor=\"CheckCircleIcon\"\n                  remixicon=\"RiCheckboxCircleLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconBell\"\n                  hugeicons=\"NotificationIcon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotificationLine\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                  phosphor=\"SignOutIcon\"\n                  remixicon=\"RiLogoutBoxLine\"\n                />\n                Log out\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-15/components/nav-workspaces.tsx",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-sera/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton render={<a href=\"#\" />}>\n                  <span>{workspace.emoji}</span>\n                  <span>{workspace.name}</span>\n                </SidebarMenuButton>\n                <SidebarMenuAction\n                  render={<CollapsibleTrigger />}\n                  className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-open:rotate-90\"\n                  showOnHover\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </SidebarMenuAction>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton render={<a href=\"#\" />}>\n                          <span>{page.emoji}</span>\n                          <span>{page.name}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-15/components/sidebar-left.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavFavorites } from \"@/registry/base-sera/blocks/sidebar-15/components/nav-favorites\"\nimport { NavMain } from \"@/registry/base-sera/blocks/sidebar-15/components/nav-main\"\nimport { NavSecondary } from \"@/registry/base-sera/blocks/sidebar-15/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/registry/base-sera/blocks/sidebar-15/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/registry/base-sera/blocks/sidebar-15/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: (\n        <IconPlaceholder\n          lucide=\"TerminalIcon\"\n          tabler=\"IconCommand\"\n          hugeicons=\"CommandIcon\"\n          phosphor=\"CommandIcon\"\n          remixicon=\"RiCommandLine\"\n        />\n      ),\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: (\n        <IconPlaceholder\n          lucide=\"AudioLinesIcon\"\n          tabler=\"IconWaveSine\"\n          hugeicons=\"AudioWave01Icon\"\n          phosphor=\"WaveformIcon\"\n          remixicon=\"RiPulseLine\"\n        />\n      ),\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: (\n        <IconPlaceholder\n          lucide=\"TerminalIcon\"\n          tabler=\"IconCommand\"\n          hugeicons=\"CommandIcon\"\n          phosphor=\"CommandIcon\"\n          remixicon=\"RiCommandLine\"\n        />\n      ),\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SearchIcon\"\n          tabler=\"IconSearch\"\n          hugeicons=\"SearchIcon\"\n          phosphor=\"MagnifyingGlassIcon\"\n          remixicon=\"RiSearchLine\"\n        />\n      ),\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SparklesIcon\"\n          tabler=\"IconSparkles\"\n          hugeicons=\"SparklesIcon\"\n          phosphor=\"SparkleIcon\"\n          remixicon=\"RiSparklingLine\"\n        />\n      ),\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CalendarIcon\"\n          tabler=\"IconCalendar\"\n          hugeicons=\"CalendarIcon\"\n          phosphor=\"CalendarIcon\"\n          remixicon=\"RiCalendarLine\"\n        />\n      ),\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BlocksIcon\"\n          tabler=\"IconCube\"\n          hugeicons=\"CubeIcon\"\n          phosphor=\"CubeIcon\"\n          remixicon=\"RiBox3Line\"\n        />\n      ),\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleQuestionIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageQuestionIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiQuestionLine\"\n        />\n      ),\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function SidebarLeft({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n        <NavMain items={data.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={data.favorites} />\n        <NavWorkspaces workspaces={data.workspaces} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-15/components/sidebar-right.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/base-sera/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/base-sera/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/base-sera/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-15/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton className=\"w-fit px-1.5 aria-expanded:bg-muted aria-expanded:text-foreground\" />\n            }\n          >\n            <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              {activeTeam.logo}\n            </div>\n            <span className=\"truncate font-medium\">{activeTeam.name}</span>\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"opacity-50\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"font-medium text-muted-foreground\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sidebar-16.json b/apps/v4/public/r/styles/base-sera/sidebar-16.json
new file mode 100644
index 0000000000..480a9e272a
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sidebar-16.json
@@ -0,0 +1,64 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-16",
+  "title": "Sidebar 16",
+  "description": "A sidebar with a sticky site header.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/sidebar-16/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/base-sera/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/base-sera/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/base-sera/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              </div>\n              <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-16/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-sera/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-sera/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/base-sera/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-sera/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconCommand\"\n                  hugeicons=\"CommandIcon\"\n                  phosphor=\"CommandIcon\"\n                  remixicon=\"RiCommandLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">Acme Inc</span>\n                <span className=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-16/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-sera/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: React.ReactNode\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible\n            key={item.title}\n            defaultOpen={item.isActive}\n            render={<SidebarMenuItem />}\n          >\n            <SidebarMenuButton\n              tooltip={item.title}\n              render={<a href={item.url} />}\n            >\n              {item.icon}\n              <span>{item.title}</span>\n            </SidebarMenuButton>\n            {item.items?.length ? (\n              <>\n                <SidebarMenuAction\n                  render={<CollapsibleTrigger />}\n                  className=\"aria-expanded:rotate-90\"\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                  <span className=\"sr-only\">Toggle</span>\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {item.items?.map((subItem) => (\n                      <SidebarMenuSubItem key={subItem.title}>\n                        <SidebarMenuSubButton render={<a href={subItem.url} />}>\n                          <span>{subItem.title}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </>\n            ) : null}\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-16/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: React.ReactNode\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton render={<a href={item.url} />}>\n              {item.icon}\n              <span>{item.name}</span>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <SidebarMenuAction\n                    showOnHover\n                    className=\"aria-expanded:bg-muted\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeOutlineIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare2\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"Trash2Icon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n            />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-16/components/nav-secondary.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton size=\"sm\" render={<a href={item.url} />}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-16/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-sera/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"aria-expanded:bg-muted aria-expanded:text-foreground\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"truncate text-xs\">{user.email}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                  <Avatar>\n                    <AvatarImage src={user.avatar} alt={user.name} />\n                    <AvatarFallback>CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">{user.name}</span>\n                    <span className=\"truncate text-xs\">{user.email}</span>\n                  </div>\n                </div>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BadgeCheckIcon\"\n                  tabler=\"IconRosetteDiscountCheck\"\n                  hugeicons=\"CheckmarkBadgeIcon\"\n                  phosphor=\"CheckCircleIcon\"\n                  remixicon=\"RiCheckboxCircleLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconBell\"\n                  hugeicons=\"NotificationIcon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotificationLine\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                  phosphor=\"SignOutIcon\"\n                  remixicon=\"RiLogoutBoxLine\"\n                />\n                Log out\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-16/components/search-form.tsx",
+      "content": "\"use client\"\n\nimport { Label } from \"@/registry/base-sera/ui/label\"\nimport { SidebarInput } from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <div className=\"relative\">\n        <Label htmlFor=\"search\" className=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Type to search...\"\n          className=\"h-8 pl-7\"\n        />\n        <IconPlaceholder\n          lucide=\"SearchIcon\"\n          tabler=\"IconSearch\"\n          hugeicons=\"SearchIcon\"\n          phosphor=\"MagnifyingGlassIcon\"\n          remixicon=\"RiSearchLine\"\n          className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n        />\n      </div>\n    </form>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/base-sera/blocks/sidebar-16/components/site-header.tsx",
+      "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-sera/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-sera/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\nimport { useSidebar } from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"sticky top-0 z-50 flex w-full items-center border-b bg-background\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <IconPlaceholder\n            lucide=\"PanelLeftIcon\"\n            tabler=\"IconLayoutSidebar\"\n            hugeicons=\"SidebarLeftIcon\"\n            phosphor=\"SidebarIcon\"\n            remixicon=\"RiLayoutLeftLine\"\n          />\n        </Button>\n        <Separator\n          orientation=\"vertical\"\n          className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n        />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sidebar-example.json b/apps/v4/public/r/styles/base-sera/sidebar-example.json
new file mode 100644
index 0000000000..2754adf253
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sidebar-example.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-example",
+  "title": "Sidebar",
+  "registryDependencies": [
+    "button",
+    "dropdown-menu",
+    "item",
+    "label",
+    "sidebar",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/sidebar-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-sera/ui/item\"\nimport { Label } from \"@/registry/base-sera/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v{selectedVersion}</ItemDescription>\n                    </ItemContent>\n                    <ItemActions>\n                      <IconPlaceholder\n                        lucide=\"ChevronsUpDownIcon\"\n                        tabler=\"IconSelector\"\n                        hugeicons=\"UnfoldMoreIcon\"\n                        phosphor=\"CaretUpDownIcon\"\n                        remixicon=\"RiArrowUpDownLine\"\n                      />\n                    </ItemActions>\n                  </Item>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <IconPlaceholder\n                          lucide=\"CheckIcon\"\n                          tabler=\"IconCheck\"\n                          hugeicons=\"Tick02Icon\"\n                          phosphor=\"CheckIcon\"\n                          remixicon=\"RiCheckLine\"\n                          className=\"ml-auto\"\n                        />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton\n                        render={<a href={subItem.url} />}\n                        isActive={subItem.isActive}\n                      >\n                        {subItem.title}\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sidebar-floating-example.json b/apps/v4/public/r/styles/base-sera/sidebar-floating-example.json
new file mode 100644
index 0000000000..0c0218221e
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sidebar-floating-example.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-floating-example",
+  "title": "Sidebar (Floating)",
+  "registryDependencies": [
+    "button",
+    "card",
+    "dropdown-menu",
+    "field",
+    "item",
+    "sidebar",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/sidebar-floating-example.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-sera/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport { Field } from \"@/registry/base-sera/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-sera/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n                <Item className=\"p-0\" size=\"xs\">\n                  <ItemContent>\n                    <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                    <ItemDescription>v1.0.0</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger\n                      render={\n                        <SidebarMenuButton className=\"data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground\" />\n                      }\n                    >\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                        remixicon=\"RiMoreLine\"\n                        className=\"ml-auto\"\n                      />\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem\n                              render={<a href={subItem.url} />}\n                              key={subItem.title}\n                            >\n                              {subItem.title}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sidebar-icon-example.json b/apps/v4/public/r/styles/base-sera/sidebar-icon-example.json
new file mode 100644
index 0000000000..55f9c41506
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sidebar-icon-example.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-icon-example",
+  "title": "Sidebar (Icon)",
+  "registryDependencies": [
+    "avatar",
+    "button",
+    "collapsible",
+    "dropdown-menu",
+    "item",
+    "sidebar",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/sidebar-icon-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-sera/ui/avatar\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-sera/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-sera/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <CollapsibleTrigger\n                      render={<SidebarMenuButton tooltip={item.title} />}\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                      <IconPlaceholder\n                        lucide=\"ChevronRightIcon\"\n                        tabler=\"IconChevronRight\"\n                        hugeicons=\"ArrowRight01Icon\"\n                        phosphor=\"CaretRightIcon\"\n                        remixicon=\"RiArrowRightSLine\"\n                        className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                      />\n                    </CollapsibleTrigger>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton\n                              render={<a href={subItem.url} />}\n                            >\n                              {subItem.title}\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sidebar-inset-example.json b/apps/v4/public/r/styles/base-sera/sidebar-inset-example.json
new file mode 100644
index 0000000000..801e1658e7
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sidebar-inset-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-inset-example",
+  "title": "Sidebar (Inset)",
+  "registryDependencies": [
+    "collapsible",
+    "sidebar",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/sidebar-inset-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-sera/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n            remixicon=\"RiHomeLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n            remixicon=\"RiShoppingBagLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n            remixicon=\"RiShoppingCartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n            remixicon=\"RiFileLine\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n            remixicon=\"RiUserLine\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n            remixicon=\"RiLifebuoyLine\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n            remixicon=\"RiSendPlaneLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    render={<a href={item.url} />}\n                    isActive={item.isActive}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <>\n                      <CollapsibleTrigger\n                        render={\n                          <SidebarMenuAction className=\"data-open:rotate-90\" />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          remixicon=\"RiArrowRightSLine\"\n                        />\n                        <span className=\"sr-only\">Toggle</span>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem) => (\n                            <SidebarMenuSubItem key={subItem.title}>\n                              <SidebarMenuSubButton\n                                render={<a href={subItem.url} />}\n                              >\n                                {subItem.title}\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </>\n                  ) : null}\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton render={<a href={item.url} />} size=\"sm\">\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sidebar.json b/apps/v4/public/r/styles/base-sera/sidebar.json
new file mode 100644
index 0000000000..490a6e0d7c
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sidebar.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar",
+  "registryDependencies": [
+    "button",
+    "input",
+    "separator",
+    "sheet",
+    "skeleton",
+    "tooltip",
+    "use-mobile"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/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 { useIsMobile } from \"@/registry/base-sera/hooks/use-mobile\"\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/base-sera/ui/sheet\"\nimport { Skeleton } from \"@/registry/base-sera/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-sera/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 flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar\",\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          \"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground\",\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=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>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 hidden text-sidebar-foreground 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          \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\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=\"flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border\"\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        \"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] hover:after:bg-sidebar-border 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        \"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar\",\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        \"relative flex w-full flex-1 flex-col 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\",\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(\n        \"h-8 w-full border-input bg-transparent shadow-none\",\n        className\n      )}\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(\"flex flex-col gap-2 p-2 [--radius:0]\", 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(\"flex flex-col gap-2 p-2\", 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(\"mx-2 w-auto bg-sidebar-border\", 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 flex min-h-0 flex-1 flex-col gap-2 overflow-auto [--radius:0] 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(\"relative flex w-full min-w-0 flex-col p-2\", className)}\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          \"flex h-8 shrink-0 items-center rounded-none px-3 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden 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 [&>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          \"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0\",\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(\"w-full text-sm\", 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(\"flex w-full min-w-0 flex-col gap-0.5\", 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  \"peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-none px-3 py-2 text-left text-sm ring-sidebar-ring outline-hidden 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! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground 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-14 px-3 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 render={render} />,\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          \"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground 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 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0\",\n          showOnHover &&\n            \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded: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        \"pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-none px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground 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 peer-data-active/menu-button:text-sidebar-accent-foreground\",\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(\"flex h-8 items-center gap-2 rounded-none px-2\", 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(\n        \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden\",\n        className\n      )}\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          \"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-none px-3 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\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"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/sidebar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sidebar-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/signup-01.json b/apps/v4/public/r/styles/base-sera/signup-01.json
new file mode 100644
index 0000000000..c57a334aff
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/signup-01.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "signup-01",
+  "title": "Signup 01",
+  "description": "A simple signup form.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/signup-01/page.tsx",
+      "content": "import { SignupForm } from \"@/registry/base-sera/blocks/signup-01/components/signup-form\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/signup/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/signup-01/components/signup-form.tsx",
+      "content": "import { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-sera/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\n\nexport function SignupForm({ ...props }: React.ComponentProps<typeof Card>) {\n  return (\n    <Card {...props}>\n      <CardHeader>\n        <CardTitle>Create an account</CardTitle>\n        <CardDescription>\n          Enter your information below to create your account\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n              <Input id=\"name\" type=\"text\" placeholder=\"John Doe\" required />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n              <Input\n                id=\"email\"\n                type=\"email\"\n                placeholder=\"m@example.com\"\n                required\n              />\n              <FieldDescription>\n                We&apos;ll use this to contact you. We will not share your email\n                with anyone else.\n              </FieldDescription>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n              <Input id=\"password\" type=\"password\" required />\n              <FieldDescription>\n                Must be at least 8 characters long.\n              </FieldDescription>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"confirm-password\">\n                Confirm Password\n              </FieldLabel>\n              <Input id=\"confirm-password\" type=\"password\" required />\n              <FieldDescription>Please confirm your password.</FieldDescription>\n            </Field>\n            <FieldGroup>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Sign up with Google\n                </Button>\n                <FieldDescription className=\"px-6 text-center\">\n                  Already have an account? <a href=\"#\">Sign in</a>\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </FieldGroup>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "signup"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/signup-02.json b/apps/v4/public/r/styles/base-sera/signup-02.json
new file mode 100644
index 0000000000..cc2c52b58e
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/signup-02.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "signup-02",
+  "title": "Signup 02",
+  "description": "A two column signup page with a cover image.",
+  "registryDependencies": [
+    "button",
+    "input",
+    "label",
+    "field"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/signup-02/page.tsx",
+      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-sera/blocks/signup-02/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <SignupForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/signup/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/signup-02/components/signup-form.tsx",
+      "content": "import { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Create your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Fill in the form below to create your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input\n            id=\"name\"\n            type=\"text\"\n            placeholder=\"John Doe\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            We&apos;ll use this to contact you. We will not share your email\n            with anyone else.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            Must be at least 8 characters long.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <Input\n            id=\"confirm-password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>Please confirm your password.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">Create Account</Button>\n        </Field>\n        <FieldSeparator>Or continue with</FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Sign up with GitHub\n          </Button>\n          <FieldDescription className=\"px-6 text-center\">\n            Already have an account? <a href=\"#\">Sign in</a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "signup"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/signup-03.json b/apps/v4/public/r/styles/base-sera/signup-03.json
new file mode 100644
index 0000000000..e9cb443726
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/signup-03.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "signup-03",
+  "title": "Signup 03",
+  "description": "A signup page with a muted background color.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "field"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/signup-03/page.tsx",
+      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-sera/blocks/signup-03/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/signup/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/signup-03/components/signup-form.tsx",
+      "content": "import { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-sera/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card>\n        <CardHeader className=\"text-center\">\n          <CardTitle className=\"text-xl\">Create your account</CardTitle>\n          <CardDescription>\n            Enter your email below to create your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n                <Input id=\"name\" type=\"text\" placeholder=\"John Doe\" required />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n                <FieldDescription className=\"text-center\">\n                  Already have an account? <a href=\"#\">Sign in</a>\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "signup"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/signup-04.json b/apps/v4/public/r/styles/base-sera/signup-04.json
new file mode 100644
index 0000000000..642428baea
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/signup-04.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "signup-04",
+  "title": "Signup 04",
+  "description": "A signup page with form and image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "field"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/signup-04/page.tsx",
+      "content": "import { SignupForm } from \"@/registry/base-sera/blocks/signup-04/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/signup/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/signup-04/components/signup-form.tsx",
+      "content": "import { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-sera/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Create your account</h1>\n                <p className=\"text-sm text-balance text-muted-foreground\">\n                  Enter your email below to create your account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n                <FieldDescription>\n                  We&apos;ll use this to contact you. We will not share your\n                  email with anyone else.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "signup"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/signup-05.json b/apps/v4/public/r/styles/base-sera/signup-05.json
new file mode 100644
index 0000000000..3ed680b81a
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/signup-05.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "signup-05",
+  "title": "Signup 05",
+  "description": "A simple signup form with social providers.",
+  "registryDependencies": [
+    "button",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/blocks/signup-05/page.tsx",
+      "content": "import { SignupForm } from \"@/registry/base-sera/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/signup/page.tsx"
+    },
+    {
+      "path": "registry/base-sera/blocks/signup-05/components/signup-form.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <FieldGroup>\n          <div className=\"flex flex-col items-center gap-2 text-center\">\n            <a\n              href=\"#\"\n              className=\"flex flex-col items-center gap-2 font-medium\"\n            >\n              <div className=\"flex size-8 items-center justify-center rounded-md\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-6\"\n                />\n              </div>\n              <span className=\"sr-only\">Acme Inc.</span>\n            </a>\n            <h1 className=\"text-xl font-bold\">Welcome to Acme Inc.</h1>\n            <FieldDescription>\n              Already have an account? <a href=\"#\">Sign in</a>\n            </FieldDescription>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </Field>\n          <Field>\n            <Button type=\"submit\">Create Account</Button>\n          </Field>\n          <FieldSeparator>Or</FieldSeparator>\n          <Field className=\"grid gap-4 sm:grid-cols-2\">\n            <Button variant=\"outline\" type=\"button\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              Continue with Apple\n            </Button>\n            <Button variant=\"outline\" type=\"button\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              Continue with Google\n            </Button>\n          </Field>\n        </FieldGroup>\n      </form>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "signup"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/skeleton-example.json b/apps/v4/public/r/styles/base-sera/skeleton-example.json
new file mode 100644
index 0000000000..999a9e16b8
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/skeleton-example.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skeleton-example",
+  "title": "Skeleton",
+  "registryDependencies": [
+    "skeleton",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/skeleton-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Card, CardContent, CardHeader } from \"@/registry/base-sera/ui/card\"\nimport { Skeleton } from \"@/registry/base-sera/ui/skeleton\"\n\nexport default function SkeletonExample() {\n  return (\n    <ExampleWrapper>\n      <SkeletonAvatar />\n      <SkeletonCard />\n      <SkeletonText />\n      <SkeletonForm />\n      <SkeletonTable />\n    </ExampleWrapper>\n  )\n}\n\nfunction SkeletonAvatar() {\n  return (\n    <Example title=\"Avatar\">\n      <div className=\"flex w-full items-center gap-4\">\n        <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n        <div className=\"grid gap-2\">\n          <Skeleton className=\"h-4 w-[150px]\" />\n          <Skeleton className=\"h-4 w-[100px]\" />\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SkeletonCard() {\n  return (\n    <Example title=\"Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <Skeleton className=\"h-4 w-2/3\" />\n          <Skeleton className=\"h-4 w-1/2\" />\n        </CardHeader>\n        <CardContent>\n          <Skeleton className=\"aspect-square w-full\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction SkeletonText() {\n  return (\n    <Example title=\"Text\">\n      <div className=\"flex w-full flex-col gap-2\">\n        <Skeleton className=\"h-4 w-full\" />\n        <Skeleton className=\"h-4 w-full\" />\n        <Skeleton className=\"h-4 w-3/4\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SkeletonForm() {\n  return (\n    <Example title=\"Form\">\n      <div className=\"flex w-full flex-col gap-7\">\n        <div className=\"flex flex-col gap-3\">\n          <Skeleton className=\"h-4 w-20\" />\n          <Skeleton className=\"h-10 w-full\" />\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Skeleton className=\"h-4 w-24\" />\n          <Skeleton className=\"h-10 w-full\" />\n        </div>\n        <Skeleton className=\"h-9 w-24\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SkeletonTable() {\n  return (\n    <Example title=\"Table\">\n      <div className=\"flex w-full flex-col gap-2\">\n        <div className=\"flex gap-4\">\n          <Skeleton className=\"h-4 flex-1\" />\n          <Skeleton className=\"h-4 w-24\" />\n          <Skeleton className=\"h-4 w-20\" />\n        </div>\n        <div className=\"flex gap-4\">\n          <Skeleton className=\"h-4 flex-1\" />\n          <Skeleton className=\"h-4 w-24\" />\n          <Skeleton className=\"h-4 w-20\" />\n        </div>\n        <div className=\"flex gap-4\">\n          <Skeleton className=\"h-4 flex-1\" />\n          <Skeleton className=\"h-4 w-24\" />\n          <Skeleton className=\"h-4 w-20\" />\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/skeleton.json b/apps/v4/public/r/styles/base-sera/skeleton.json
new file mode 100644
index 0000000000..2d98ce4877
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/skeleton.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skeleton",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/skeleton.tsx",
+      "content": "import { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"animate-pulse bg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/skeleton",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/skeleton-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/slider-example.json b/apps/v4/public/r/styles/base-sera/slider-example.json
new file mode 100644
index 0000000000..519f9bfc5f
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/slider-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "slider-example",
+  "title": "Slider",
+  "registryDependencies": [
+    "label",
+    "slider",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/slider-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Label } from \"@/registry/base-sera/ui/label\"\nimport { Slider } from \"@/registry/base-sera/ui/slider\"\n\nexport default function SliderExample() {\n  return (\n    <ExampleWrapper>\n      <SliderBasic />\n      <SliderRange />\n      <SliderMultiple />\n      <SliderVertical />\n      <SliderControlled />\n      <SliderDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction SliderBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Slider defaultValue={50} max={100} step={1} />\n    </Example>\n  )\n}\n\nfunction SliderRange() {\n  return (\n    <Example title=\"Range\">\n      <Slider defaultValue={[25, 50]} max={100} step={5} />\n    </Example>\n  )\n}\n\nfunction SliderMultiple() {\n  return (\n    <Example title=\"Multiple Thumbs\">\n      <Slider defaultValue={[10, 20, 70]} max={100} step={10} />\n    </Example>\n  )\n}\n\nfunction SliderVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex items-center gap-6\">\n        <Slider\n          defaultValue={[50]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n        <Slider\n          defaultValue={[25]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderControlled() {\n  const [value, setValue] = React.useState([0.3, 0.7])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"grid w-full gap-3\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <Label htmlFor=\"slider-demo-temperature\">Temperature</Label>\n          <span className=\"text-sm text-muted-foreground\">\n            {value.join(\", \")}\n          </span>\n        </div>\n        <Slider\n          id=\"slider-demo-temperature\"\n          value={value}\n          onValueChange={(value) => setValue(value as number[])}\n          min={0}\n          max={1}\n          step={0.1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Slider defaultValue={[50]} max={100} step={1} disabled />\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/slider.json b/apps/v4/public/r/styles/base-sera/slider.json
new file mode 100644
index 0000000000..024b819d24
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/slider.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "slider",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/slider.tsx",
+      "content": "import { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: SliderPrimitive.Root.Props) {\n  const _values = Array.isArray(value)\n    ? value\n    : Array.isArray(defaultValue)\n      ? defaultValue\n      : [min, max]\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\"data-horizontal:w-full data-vertical:h-full\", className)}\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      thumbAlignment=\"edge\"\n      {...props}\n    >\n      <SliderPrimitive.Control className=\"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\">\n        <SliderPrimitive.Track\n          data-slot=\"slider-track\"\n          className=\"relative grow overflow-hidden bg-input/50 select-none data-horizontal:h-0.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-0.5\"\n        >\n          <SliderPrimitive.Indicator\n            data-slot=\"slider-range\"\n            className=\"bg-primary select-none data-horizontal:h-full data-vertical:w-full\"\n          />\n        </SliderPrimitive.Track>\n        {Array.from({ length: _values.length }, (_, index) => (\n          <SliderPrimitive.Thumb\n            data-slot=\"slider-thumb\"\n            key={index}\n            className=\"block size-3 shrink-0 border-none bg-primary transition-colors select-none hover:ring-2 hover:ring-ring/30 focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/slider",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/slider-example.tsx",
+      "api": "https://base-ui.com/react/components/slider.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sonner-example.json b/apps/v4/public/r/styles/base-sera/sonner-example.json
new file mode 100644
index 0000000000..11529ba680
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sonner-example.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sonner-example",
+  "title": "Sonner",
+  "registryDependencies": [
+    "sonner",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/sonner-example.tsx",
+      "content": "\"use client\"\n\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\n\nexport default function SonnerExample() {\n  return (\n    <ExampleWrapper>\n      <SonnerBasic />\n      <SonnerWithDescription />\n    </ExampleWrapper>\n  )\n}\n\nfunction SonnerBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center justify-center\">\n      <Button\n        onClick={() => toast(\"Event has been created\")}\n        variant=\"outline\"\n        className=\"w-fit\"\n      >\n        Show Toast\n      </Button>\n    </Example>\n  )\n}\n\nfunction SonnerWithDescription() {\n  return (\n    <Example title=\"With Description\" className=\"items-center justify-center\">\n      <Button\n        onClick={() =>\n          toast(\"Event has been created\", {\n            description: \"Monday, January 3rd at 6:00pm\",\n          })\n        }\n        variant=\"outline\"\n        className=\"w-fit\"\n      >\n        Show Toast\n      </Button>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/sonner.json b/apps/v4/public/r/styles/base-sera/sonner.json
new file mode 100644
index 0000000000..47b652302e
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/sonner.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sonner",
+  "dependencies": [
+    "sonner",
+    "next-themes"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/ui/sonner.tsx",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n            className=\"size-4\"\n          />\n        ),\n        info: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            phosphor=\"InfoIcon\"\n            remixicon=\"RiInformationLine\"\n            className=\"size-4\"\n          />\n        ),\n        warning: (\n          <IconPlaceholder\n            lucide=\"TriangleAlertIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            phosphor=\"WarningIcon\"\n            remixicon=\"RiErrorWarningLine\"\n            className=\"size-4\"\n          />\n        ),\n        error: (\n          <IconPlaceholder\n            lucide=\"OctagonXIcon\"\n            tabler=\"IconAlertOctagon\"\n            hugeicons=\"MultiplicationSignCircleIcon\"\n            phosphor=\"XCircleIcon\"\n            remixicon=\"RiCloseCircleLine\"\n            className=\"size-4\"\n          />\n        ),\n        loading: (\n          <IconPlaceholder\n            lucide=\"Loader2Icon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoaderLine\"\n            className=\"size-4 animate-spin\"\n          />\n        ),\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/sonner",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sonner-example.tsx",
+      "api": "https://sonner.emilkowal.ski"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/spinner-example.json b/apps/v4/public/r/styles/base-sera/spinner-example.json
new file mode 100644
index 0000000000..eb056d5b42
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/spinner-example.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "spinner-example",
+  "title": "Spinner",
+  "registryDependencies": [
+    "badge",
+    "button",
+    "empty",
+    "field",
+    "input-group",
+    "spinner",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/spinner-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Badge } from \"@/registry/base-sera/ui/badge\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/base-sera/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/base-sera/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-sera/ui/input-group\"\nimport { Spinner } from \"@/registry/base-sera/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n  return (\n    <ExampleWrapper>\n      <SpinnerBasic />\n      <SpinnerInButtons />\n      <SpinnerInBadges />\n      <SpinnerInInputGroup />\n      <SpinnerInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction SpinnerBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-6\">\n        <Spinner />\n        <Spinner className=\"size-6\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInButtons() {\n  return (\n    <Example title=\"In Buttons\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Button>\n          <Spinner data-icon=\"inline-start\" /> Submit\n        </Button>\n        <Button disabled>\n          <Spinner data-icon=\"inline-start\" /> Disabled\n        </Button>\n        <Button variant=\"outline\" disabled>\n          <Spinner data-icon=\"inline-start\" /> Outline\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" disabled>\n          <Spinner data-icon=\"inline-start\" />\n          <span className=\"sr-only\">Loading...</span>\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInBadges() {\n  return (\n    <Example title=\"In Badges\" className=\"items-center justify-center\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInInputGroup() {\n  return (\n    <Example title=\"In Input Group\">\n      <Field>\n        <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n        <InputGroup>\n          <InputGroupInput id=\"input-group-spinner\" />\n          <InputGroupAddon>\n            <Spinner />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SpinnerInEmpty() {\n  return (\n    <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n      <Empty className=\"min-h-[300px]\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            nativeButton={false}\n            className=\"text-muted-foreground\"\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/spinner.json b/apps/v4/public/r/styles/base-sera/spinner.json
new file mode 100644
index 0000000000..3a0a4fdee2
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/spinner.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "spinner",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/spinner.tsx",
+      "content": "import { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <IconPlaceholder\n      lucide=\"Loader2Icon\"\n      tabler=\"IconLoader\"\n      hugeicons=\"Loading03Icon\"\n      phosphor=\"SpinnerIcon\"\n      remixicon=\"RiLoaderLine\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/spinner",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/spinner-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/style.json b/apps/v4/public/r/styles/base-sera/style.json
new file mode 100644
index 0000000000..a58f5ba309
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/style.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "style",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "@base-ui/react"
+  ],
+  "devDependencies": [
+    "tw-animate-css",
+    "shadcn"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {},
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@import \"shadcn/tailwind.css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  },
+  "type": "registry:style"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/switch-example.json b/apps/v4/public/r/styles/base-sera/switch-example.json
new file mode 100644
index 0000000000..f4e9b07919
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/switch-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "switch-example",
+  "title": "Switch",
+  "registryDependencies": [
+    "field",
+    "label",
+    "switch",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/switch-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/base-sera/ui/field\"\nimport { Label } from \"@/registry/base-sera/ui/label\"\nimport { Switch } from \"@/registry/base-sera/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/switch.json b/apps/v4/public/r/styles/base-sera/switch.json
new file mode 100644
index 0000000000..38a67170c8
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/switch.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "switch",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/switch.tsx",
+      "content": "\"use client\"\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: SwitchPrimitive.Root.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"peer group/switch relative inline-flex shrink-0 items-center rounded-none border transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-[size=default]:h-4.5 data-[size=default]:w-8.25 data-[size=sm]:h-3.5 data-[size=sm]:w-6.25 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-unchecked:border-input/50 data-unchecked:bg-input data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"pointer-events-none block bg-background ring-0 transition-transform group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-2.5 data-checked:translate-x-[calc(100%+2px)] dark:data-checked:bg-primary-foreground data-unchecked:translate-x-0.25 dark:data-unchecked:bg-foreground\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/switch",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/switch-example.tsx",
+      "api": "https://base-ui.com/react/components/switch.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/table-example.json b/apps/v4/public/r/styles/base-sera/table-example.json
new file mode 100644
index 0000000000..2ae291f511
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/table-example.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "table-example",
+  "title": "Table",
+  "registryDependencies": [
+    "button",
+    "dropdown-menu",
+    "input",
+    "select",
+    "table",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/table-example.tsx",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-sera/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-sera/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableExample() {\n  return (\n    <ExampleWrapper>\n      <TableBasic />\n      <TableWithFooter />\n      <TableSimple />\n      <TableWithBadges />\n      <TableWithActions />\n      <TableWithSelect />\n      <TableWithInput />\n    </ExampleWrapper>\n  )\n}\n\nfunction TableBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithFooter() {\n  return (\n    <Example title=\"With Footer\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead className=\"text-right\">Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Sarah Chen</TableCell>\n            <TableCell>sarah.chen@acme.com</TableCell>\n            <TableCell className=\"text-right\">Admin</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Marc Rodriguez</TableCell>\n            <TableCell>marcus.rodriguez@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Emily Watson</TableCell>\n            <TableCell>emily.watson@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithBadges() {\n  return (\n    <Example title=\"With Badges\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Priority</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400\">\n                Completed\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400\">\n                High\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400\">\n                In Progress\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Medium\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Pending\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Low\n              </span>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithActions() {\n  return (\n    <Example title=\"With Actions\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Price</TableHead>\n            <TableHead className=\"text-right\">Actions</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>$29.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>$129.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>$49.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nconst people = [\n  { value: \"sarah\", label: \"Sarah Chen\" },\n  { value: \"marcus\", label: \"Marc Rodriguez\" },\n  { value: \"emily\", label: \"Emily Watson\" },\n  { value: \"david\", label: \"David Kim\" },\n]\n\nconst tasks = [\n  {\n    task: \"Design homepage\",\n    assignee: \"sarah\",\n    status: \"In Progress\",\n  },\n  {\n    task: \"Implement API\",\n    assignee: \"marcus\",\n    status: \"Pending\",\n  },\n  {\n    task: \"Write tests\",\n    assignee: \"emily\",\n    status: \"Not Started\",\n  },\n]\n\nfunction TableWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Assignee</TableHead>\n            <TableHead>Status</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {tasks.map((item) => (\n            <TableRow key={item.task}>\n              <TableCell className=\"font-medium\">{item.task}</TableCell>\n              <TableCell>\n                <Select\n                  items={people}\n                  defaultValue={people.find(\n                    (person) => person.value === item.assignee\n                  )}\n                  itemToStringValue={(item) => {\n                    return item.value\n                  }}\n                >\n                  <SelectTrigger className=\"w-40\" size=\"sm\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      {people.map((person) => (\n                        <SelectItem key={person.value} value={person}>\n                          {person.label}\n                        </SelectItem>\n                      ))}\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </TableCell>\n              <TableCell>{item.status}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Quantity</TableHead>\n            <TableHead>Price</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$29.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"2\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$129.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$49.99</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/table.json b/apps/v4/public/r/styles/base-sera/table.json
new file mode 100644
index 0000000000..201f85c222
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/table.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "table",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/table.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-12 px-3 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/table",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/table-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/tabs-example.json b/apps/v4/public/r/styles/base-sera/tabs-example.json
new file mode 100644
index 0000000000..cf1171333d
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/tabs-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tabs-example",
+  "title": "Tabs",
+  "registryDependencies": [
+    "button",
+    "dropdown-menu",
+    "tabs",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/tabs-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-sera/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />}\n            >\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span className=\"sr-only\">More options</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/tabs.json b/apps/v4/public/r/styles/base-sera/tabs.json
new file mode 100644
index 0000000000..34b4e82aea
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/tabs.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tabs",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/tabs.tsx",
+      "content": "\"use client\"\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"group/tabs-list inline-flex w-fit items-center justify-center p-1 text-muted-foreground group-data-horizontal/tabs:h-10 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-4 group-data-vertical/tabs:py-2 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground\",\n        \"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-sm outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/tabs",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tabs-example.tsx",
+      "api": "https://base-ui.com/react/components/tabs.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/textarea-example.json b/apps/v4/public/r/styles/base-sera/textarea-example.json
new file mode 100644
index 0000000000..b864ced8d9
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/textarea-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-example",
+  "title": "Textarea",
+  "registryDependencies": [
+    "field",
+    "textarea",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/textarea-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/base-sera/ui/field\"\nimport { Textarea } from \"@/registry/base-sera/ui/textarea\"\n\nexport default function TextareaExample() {\n  return (\n    <ExampleWrapper>\n      <TextareaBasic />\n      <TextareaInvalid />\n      <TextareaWithLabel />\n      <TextareaWithDescription />\n      <TextareaDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction TextareaBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Textarea placeholder=\"Type your message here.\" />\n    </Example>\n  )\n}\n\nfunction TextareaInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Textarea placeholder=\"Type your message here.\" aria-invalid=\"true\" />\n    </Example>\n  )\n}\n\nfunction TextareaWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"textarea-demo-message\">Message</FieldLabel>\n        <Textarea\n          id=\"textarea-demo-message\"\n          placeholder=\"Type your message here.\"\n          rows={6}\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction TextareaWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field>\n        <FieldLabel htmlFor=\"textarea-demo-message-2\">Message</FieldLabel>\n        <Textarea\n          id=\"textarea-demo-message-2\"\n          placeholder=\"Type your message here.\"\n          rows={6}\n        />\n        <FieldDescription>\n          Type your message and press enter to send.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction TextareaDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"textarea-demo-disabled\">Message</FieldLabel>\n        <Textarea\n          id=\"textarea-demo-disabled\"\n          placeholder=\"Type your message here.\"\n          disabled\n        />\n      </Field>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/textarea.json b/apps/v4/public/r/styles/base-sera/textarea.json
new file mode 100644
index 0000000000..974a889a0c
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/textarea.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/textarea.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"flex field-sizing-content min-h-16 w-full resize-none rounded-none border border-transparent border-b-input bg-transparent px-0 py-3 text-base transition-[color,border-color] outline-none placeholder:text-muted-foreground focus-visible:border-b-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive md:text-sm dark:aria-invalid:border-b-destructive/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/textarea",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/textarea-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/toggle-example.json b/apps/v4/public/r/styles/base-sera/toggle-example.json
new file mode 100644
index 0000000000..977dffca40
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/toggle-example.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-example",
+  "title": "Toggle",
+  "registryDependencies": [
+    "toggle",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/toggle-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { Toggle } from \"@/registry/base-sera/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n              remixicon=\"RiBold\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n              remixicon=\"RiBold\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n              remixicon=\"RiItalic\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n              remixicon=\"RiItalic\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n              remixicon=\"RiUnderline\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n              remixicon=\"RiUnderline\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n              remixicon=\"RiBold\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n              remixicon=\"RiBold\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n              remixicon=\"RiItalic\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n              remixicon=\"RiItalic\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n              remixicon=\"RiUnderline\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n              remixicon=\"RiUnderline\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/toggle-group-example.json b/apps/v4/public/r/styles/base-sera/toggle-group-example.json
new file mode 100644
index 0000000000..6d25535adf
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/toggle-group-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-example",
+  "title": "Toggle Group",
+  "registryDependencies": [
+    "input",
+    "select",
+    "toggle-group",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/toggle-group-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-sera/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/base-sera/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n      <ToggleGroupFontWeightSelector />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup multiple spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" defaultValue={[\"all\"]}>\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup size=\"sm\" defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup multiple variant=\"outline\" spacing={2} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n            remixicon=\"RiStarLine\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup defaultValue={[\"all\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        defaultValue={[\"today\"]}\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup defaultValue={[\"newest\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n            remixicon=\"RiArrowDownLine\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n            remixicon=\"RiArrowUpLine\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  const items = [\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Archived\", value: \"archived\" },\n  ]\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items} defaultValue={items[0]}>\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup defaultValue={[\"grid\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup multiple orientation=\"vertical\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        defaultValue={[\"all\"]}\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple orientation=\"vertical\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFontWeightSelector() {\n  const [fontWeight, setFontWeight] = React.useState(\"normal\")\n  return (\n    <Example title=\"Font Weight Selector\">\n      <Field>\n        <FieldLabel>Font Weight</FieldLabel>\n        <ToggleGroup\n          value={[fontWeight]}\n          onValueChange={(value) => setFontWeight(value[0])}\n          variant=\"outline\"\n          spacing={2}\n          size=\"lg\"\n        >\n          <ToggleGroupItem\n            value=\"light\"\n            aria-label=\"Light\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-light\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"normal\"\n            aria-label=\"Normal\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-normal\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"medium\"\n            aria-label=\"Medium\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-medium\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"bold\"\n            aria-label=\"Bold\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-bold\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use{\" \"}\n          <code className=\"rounded-md bg-muted px-1 py-0.5 font-mono\">\n            font-{fontWeight}\n          </code>{\" \"}\n          to set the font weight.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={1}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/toggle-group.json b/apps/v4/public/r/styles/base-sera/toggle-group.json
new file mode 100644
index 0000000000..8f61ed8845
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/toggle-group.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/ui/toggle-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { toggleVariants } from \"@/registry/base-sera/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: ToggleGroupPrimitive.Props &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[spacing=0]:data-[variant=outline]:rounded-none data-vertical:flex-col data-vertical:items-stretch\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-6 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-4 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-4 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-none group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-none data-[state=on]:bg-muted data-[state=on]:text-foreground group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </TogglePrimitive>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/toggle-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-group-example.tsx",
+      "api": "https://base-ui.com/react/components/toggle-group.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/toggle.json b/apps/v4/public/r/styles/base-sera/toggle.json
new file mode 100644
index 0000000000..80a2afd5d2
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/toggle.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/toggle.tsx",
+      "content": "\"use client\"\n\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nconst toggleVariants = cva(\n  \"group/toggle inline-flex items-center justify-center gap-1.5 rounded-none text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border border-input bg-transparent hover:bg-muted\",\n      },\n      size: {\n        default:\n          \"h-10 min-w-10 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4\",\n        sm: \"h-9 min-w-9 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        lg: \"h-11 min-w-11 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/toggle",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-example.tsx",
+      "api": "https://base-ui.com/react/components/toggle.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/tooltip-example.json b/apps/v4/public/r/styles/base-sera/tooltip-example.json
new file mode 100644
index 0000000000..e9a03958ac
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/tooltip-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tooltip-example",
+  "title": "Tooltip",
+  "registryDependencies": [
+    "button",
+    "kbd",
+    "tooltip",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/tooltip-example.tsx",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { Kbd } from \"@/registry/base-sera/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-sera/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"ghost\" size=\"icon\" />}>\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"InfoIcon\"\n            remixicon=\"RiInformationLine\"\n          />\n          <span className=\"sr-only\">Info</span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger render={<span className=\"inline-block w-fit\" />}>\n          <Button variant=\"outline\" disabled>\n            Disabled\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" size=\"icon-sm\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n            phosphor=\"FloppyDiskIcon\"\n            remixicon=\"RiSaveLine\"\n          />\n        </TooltipTrigger>\n        <TooltipContent>\n          Save Changes <Kbd>S</Kbd>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <a\n              href=\"#\"\n              className=\"w-fit text-sm text-primary underline-offset-4 hover:underline\"\n              onClick={(e) => e.preventDefault()}\n            />\n          }\n        >\n          Learn more\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Status\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/tooltip.json b/apps/v4/public/r/styles/base-sera/tooltip.json
new file mode 100644
index 0000000000..323db172ed
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/tooltip.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tooltip",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/tooltip.tsx",
+      "content": "\"use client\"\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction TooltipProvider({\n  delay = 0,\n  ...props\n}: TooltipPrimitive.Provider.Props) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delay={delay}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  side = \"top\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  children,\n  ...props\n}: TooltipPrimitive.Popup.Props &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            \"z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-none bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-none data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-none bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:translate-x-[1.5px] data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:translate-x-[-1.5px] data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5\" />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/tooltip",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tooltip-example.tsx",
+      "api": "https://base-ui.com/react/components/tooltip.md"
+    }
+  },
+  "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/use-mobile.json b/apps/v4/public/r/styles/base-sera/use-mobile.json
new file mode 100644
index 0000000000..28f30e725a
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/use-mobile.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "use-mobile",
+  "files": [
+    {
+      "path": "registry/base-sera/hooks/use-mobile.ts",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "type": "registry:hook"
+    }
+  ],
+  "type": "registry:hook"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-sera/utils.json b/apps/v4/public/r/styles/base-sera/utils.json
new file mode 100644
index 0000000000..c2313350de
--- /dev/null
+++ b/apps/v4/public/r/styles/base-sera/utils.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "utils",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/lib/utils.ts",
+      "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib"
+    }
+  ],
+  "type": "registry:lib"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/demo.json b/apps/v4/public/r/styles/base-vega/demo.json
index e2c57e8cc7..01d7d8c901 100644
--- a/apps/v4/public/r/styles/base-vega/demo.json
+++ b/apps/v4/public/r/styles/base-vega/demo.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-vega/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-vega/ui/badge\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-vega/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport { Checkbox } from \"@/registry/base-vega/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-vega/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-vega/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-vega/ui/radio-group\"\nimport { Slider } from \"@/registry/base-vega/ui/slider\"\nimport { Switch } from \"@/registry/base-vega/ui/switch\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-vega/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-vega/ui/badge\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-vega/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport { Checkbox } from \"@/registry/base-vega/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-vega/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-vega/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-vega/ui/radio-group\"\nimport { Slider } from \"@/registry/base-vega/ui/slider\"\nimport { Switch } from \"@/registry/base-vega/ui/switch\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/example.json b/apps/v4/public/r/styles/base-vega/example.json
index 78617efed4..63e05c016b 100644
--- a/apps/v4/public/r/styles/base-vega/example.json
+++ b/apps/v4/public/r/styles/base-vega/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/base-vega/components/example.tsx",
-      "content": "import { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground style-lyra:rounded-none style-sera:rounded-none *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/field.json b/apps/v4/public/r/styles/base-vega/field.json
index c8e90dec7c..2eb5de8b96 100644
--- a/apps/v4/public/r/styles/base-vega/field.json
+++ b/apps/v4/public/r/styles/base-vega/field.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/font-eb-garamond.json b/apps/v4/public/r/styles/base-vega/font-eb-garamond.json
new file mode 100644
index 0000000000..e3de403ba0
--- /dev/null
+++ b/apps/v4/public/r/styles/base-vega/font-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-eb-garamond",
+  "title": "EB Garamond",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/font-heading-eb-garamond.json b/apps/v4/public/r/styles/base-vega/font-heading-eb-garamond.json
new file mode 100644
index 0000000000..2f7d94b7e5
--- /dev/null
+++ b/apps/v4/public/r/styles/base-vega/font-heading-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-eb-garamond",
+  "title": "EB Garamond (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/registry.json b/apps/v4/public/r/styles/base-vega/registry.json
index cf9dcfd086..d81c1de991 100644
--- a/apps/v4/public/r/styles/base-vega/registry.json
+++ b/apps/v4/public/r/styles/base-vega/registry.json
@@ -3185,6 +3185,19 @@
         "dependency": "@fontsource-variable/playfair-display"
       }
     },
+    {
+      "name": "font-eb-garamond",
+      "title": "EB Garamond",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
+    },
     {
       "name": "font-heading-geist",
       "title": "Geist (Heading)",
@@ -3496,6 +3509,19 @@
         "subsets": ["latin"],
         "dependency": "@fontsource-variable/playfair-display"
       }
+    },
+    {
+      "name": "font-heading-eb-garamond",
+      "title": "EB Garamond (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
     }
   ]
 }
diff --git a/apps/v4/public/r/styles/radix-luma/accordion-example.json b/apps/v4/public/r/styles/radix-luma/accordion-example.json
index 0cf307f400..106712075e 100644
--- a/apps/v4/public/r/styles/radix-luma/accordion-example.json
+++ b/apps/v4/public/r/styles/radix-luma/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-luma/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/radix-luma/ui/accordion\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-luma/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border\"\n          >\n            <AccordionTrigger className=\"font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0 style-luma:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg style-luma:rounded-xl\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"p-1 data-open:bg-muted/50\"\n          >\n            <AccordionTrigger className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/radix-luma/ui/accordion\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-luma/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border\"\n          >\n            <AccordionTrigger className=\"font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0 style-luma:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg style-luma:rounded-xl style-sera:rounded-none\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"p-1 data-open:bg-muted/50 style-sera:p-0\"\n          >\n            <AccordionTrigger className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2 style-sera:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2 style-sera:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-luma/alert-example.json b/apps/v4/public/r/styles/radix-luma/alert-example.json
index 238c13de0d..86199ea60d 100644
--- a/apps/v4/public/r/styles/radix-luma/alert-example.json
+++ b/apps/v4/public/r/styles/radix-luma/alert-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-luma/examples/alert-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/radix-luma/ui/alert\"\nimport { Badge } from \"@/registry/radix-luma/ui/badge\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-luma/ui/card\"\nimport { Input } from \"@/registry/radix-luma/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-luma/ui/item\"\nimport { Label } from \"@/registry/radix-luma/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-luma/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n      <AlertExample5 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample5() {\n  return (\n    <Example title=\"Inside Card\">\n      <Card className=\"mx-auto w-full max-w-lg\">\n        <CardHeader>\n          <CardTitle>Create project</CardTitle>\n        </CardHeader>\n        <CardContent className=\"flex flex-col gap-4\">\n          <Alert>\n            <IconPlaceholder\n              lucide=\"CircleAlertIcon\"\n              tabler=\"IconExclamationCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"WarningCircleIcon\"\n              remixicon=\"RiErrorWarningLine\"\n            />\n            <AlertTitle>\n              You have reached the limit of 3 free projects.\n            </AlertTitle>\n            <AlertDescription>\n              Upgrade to Pro to create unlimited projects.\n            </AlertDescription>\n          </Alert>\n          <div className=\"flex flex-col gap-2\">\n            <Label htmlFor=\"project-name\">Name</Label>\n            <Input id=\"project-name\" placeholder=\"My project\" />\n          </div>\n          <div className=\"flex flex-col gap-2\">\n            <Label htmlFor=\"project-framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"project-framework\">\n                <SelectValue placeholder=\"Select a framework\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"next\">Next.js</SelectItem>\n                <SelectItem value=\"remix\">Remix</SelectItem>\n                <SelectItem value=\"astro\">Astro</SelectItem>\n                <SelectItem value=\"nuxt\">Nuxt</SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n          <Item variant=\"outline\">\n            <ItemMedia variant=\"image\" className=\"border\">\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Project Alpha</ItemTitle>\n              <ItemDescription>Created 2 days ago</ItemDescription>\n            </ItemContent>\n          </Item>\n        </CardContent>\n        <CardFooter>\n          <Button className=\"w-full\">Create project</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/radix-luma/ui/alert\"\nimport { Badge } from \"@/registry/radix-luma/ui/badge\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-luma/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-luma/ui/field\"\nimport { Input } from \"@/registry/radix-luma/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-luma/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-luma/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n      <AlertExample5 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample5() {\n  return (\n    <Example title=\"Inside Card\" className=\"style-sera:bg-transparent\">\n      <Card className=\"mx-auto w-full max-w-lg\">\n        <CardHeader>\n          <CardTitle>Create project</CardTitle>\n          <CardDescription>\n            Fill in the form below to create a new project.\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex flex-col gap-4 style-sera:gap-8\">\n          <Alert>\n            <IconPlaceholder\n              lucide=\"CircleAlertIcon\"\n              tabler=\"IconExclamationCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"WarningCircleIcon\"\n              remixicon=\"RiErrorWarningLine\"\n            />\n            <AlertTitle>\n              You have reached the limit of 3 free projects.\n            </AlertTitle>\n            <AlertDescription>\n              Upgrade to Pro to create unlimited projects.\n            </AlertDescription>\n          </Alert>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\">Name</FieldLabel>\n              <Input id=\"project-name\" placeholder=\"My project\" />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"project-framework\">Framework</FieldLabel>\n              <Select>\n                <SelectTrigger id=\"project-framework\">\n                  <SelectValue placeholder=\"Select a framework\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"next\">Next.js</SelectItem>\n                    <SelectItem value=\"remix\">Remix</SelectItem>\n                    <SelectItem value=\"astro\">Astro</SelectItem>\n                    <SelectItem value=\"nuxt\">Nuxt</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </Field>\n          </FieldGroup>\n          <Item variant=\"outline\">\n            <ItemMedia variant=\"image\" className=\"border\">\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Project Alpha</ItemTitle>\n              <ItemDescription>Created 2 days ago</ItemDescription>\n            </ItemContent>\n          </Item>\n        </CardContent>\n        <CardFooter>\n          <Button className=\"w-full\">Create project</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-luma/aspect-ratio-example.json b/apps/v4/public/r/styles/radix-luma/aspect-ratio-example.json
index 671a9a157d..e7ac6c4667 100644
--- a/apps/v4/public/r/styles/radix-luma/aspect-ratio-example.json
+++ b/apps/v4/public/r/styles/radix-luma/aspect-ratio-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-luma/examples/aspect-ratio-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport { AspectRatio } from \"@/registry/radix-luma/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={16 / 9}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio\n        ratio={1 / 1}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={9 / 16}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={21 / 9}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport { AspectRatio } from \"@/registry/radix-luma/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={16 / 9}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio\n        ratio={1 / 1}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={9 / 16}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={21 / 9}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-luma/button-group.json b/apps/v4/public/r/styles/radix-luma/button-group.json
index 03184bca27..e7d71a6f02 100644
--- a/apps/v4/public/r/styles/radix-luma/button-group.json
+++ b/apps/v4/public/r/styles/radix-luma/button-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-luma/ui/button-group.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-luma/lib/utils\"\nimport { Separator } from \"@/registry/radix-luma/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-border has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-border has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-ring has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-ring has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-4xl [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:[&>input]:border-border has-[>[data-variant=outline]]:[&>input:focus-visible]:border-ring\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-4xl!\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-4xl!\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-4xl border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-luma/lib/utils\"\nimport { Separator } from \"@/registry/radix-luma/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-border has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-border has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-ring has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-ring has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-4xl [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:[&>input]:border-border has-[>[data-variant=outline]]:[&>input:focus-visible]:border-ring\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-4xl!\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-4xl!\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-4xl border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-luma/chart-example.json b/apps/v4/public/r/styles/radix-luma/chart-example.json
index 76397e6b8b..a3d2a9a807 100644
--- a/apps/v4/public/r/styles/radix-luma/chart-example.json
+++ b/apps/v4/public/r/styles/radix-luma/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-luma/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-luma/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-luma/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartPieExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={64}\n              outerRadius={94}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-luma/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-luma/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartPieExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  const [params] = useDesignSystemSearchParams()\n  const isRounded = ![\"lyra\", \"sera\"].includes(params.style)\n\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                radius={isRounded ? 4 : 0}\n              />\n              <Bar\n                dataKey=\"mobile\"\n                fill=\"var(--color-mobile)\"\n                radius={isRounded ? 4 : 0}\n              />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={64}\n              outerRadius={94}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-luma/combobox-example.json b/apps/v4/public/r/styles/radix-luma/combobox-example.json
index 8f4461c160..6956bc74e8 100644
--- a/apps/v4/public/r/styles/radix-luma/combobox-example.json
+++ b/apps/v4/public/r/styles/radix-luma/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/radix-luma/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-luma/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/radix-luma/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-luma/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-luma/ui/field\"\nimport { Input } from \"@/registry/radix-luma/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-luma/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-luma/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-luma/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"w-52 justify-between font-normal text-muted-foreground\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-luma/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/radix-luma/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-luma/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-luma/ui/field\"\nimport { Input } from \"@/registry/radix-luma/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-luma/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-luma/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-luma/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"w-52 justify-between font-normal text-muted-foreground style-sera:hidden\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-luma/demo.json b/apps/v4/public/r/styles/radix-luma/demo.json
index c45a4c8283..5003379979 100644
--- a/apps/v4/public/r/styles/radix-luma/demo.json
+++ b/apps/v4/public/r/styles/radix-luma/demo.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-luma/examples/demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-luma/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-luma/ui/badge\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-luma/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-luma/ui/card\"\nimport { Checkbox } from \"@/registry/radix-luma/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-luma/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-luma/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-luma/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-luma/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-luma/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-luma/ui/slider\"\nimport { Switch } from \"@/registry/radix-luma/ui/switch\"\nimport { Textarea } from \"@/registry/radix-luma/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-luma/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-luma/ui/badge\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-luma/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-luma/ui/card\"\nimport { Checkbox } from \"@/registry/radix-luma/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-luma/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-luma/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-luma/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-luma/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-luma/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-luma/ui/slider\"\nimport { Switch } from \"@/registry/radix-luma/ui/switch\"\nimport { Textarea } from \"@/registry/radix-luma/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-luma/drawer-example.json b/apps/v4/public/r/styles/radix-luma/drawer-example.json
index 38e4ce35e2..1aa21669c8 100644
--- a/apps/v4/public/r/styles/radix-luma/drawer-example.json
+++ b/apps/v4/public/r/styles/radix-luma/drawer-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-luma/examples/drawer-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-luma/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\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          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-luma/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed style-sera:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed style-sera:leading-relaxed\"\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          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-luma/dropdown-menu-example.json b/apps/v4/public/r/styles/radix-luma/dropdown-menu-example.json
index 60f5326078..d55811519c 100644
--- a/apps/v4/public/r/styles/radix-luma/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/radix-luma/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-luma/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-luma/ui/avatar\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-luma/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-luma/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-luma/ui/avatar\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-luma/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-luma/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-luma/example.json b/apps/v4/public/r/styles/radix-luma/example.json
index 225a14fc2e..eacc68bacf 100644
--- a/apps/v4/public/r/styles/radix-luma/example.json
+++ b/apps/v4/public/r/styles/radix-luma/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/radix-luma/components/example.tsx",
-      "content": "import { cn } from \"@/registry/radix-luma/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/radix-luma/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground style-lyra:rounded-none style-sera:rounded-none *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-luma/field.json b/apps/v4/public/r/styles/radix-luma/field.json
index 1e6f73642b..38baffd26f 100644
--- a/apps/v4/public/r/styles/radix-luma/field.json
+++ b/apps/v4/public/r/styles/radix-luma/field.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/radix-luma/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-luma/lib/utils\"\nimport { Label } from \"@/registry/radix-luma/ui/label\"\nimport { Separator } from \"@/registry/radix-luma/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:bg-input/30 has-[>[data-slot=field]]:rounded-2xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-luma/lib/utils\"\nimport { Label } from \"@/registry/radix-luma/ui/label\"\nimport { Separator } from \"@/registry/radix-luma/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:bg-input/30 has-[>[data-slot=field]]:rounded-2xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-luma/font-eb-garamond.json b/apps/v4/public/r/styles/radix-luma/font-eb-garamond.json
new file mode 100644
index 0000000000..e3de403ba0
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-luma/font-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-eb-garamond",
+  "title": "EB Garamond",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-luma/font-heading-eb-garamond.json b/apps/v4/public/r/styles/radix-luma/font-heading-eb-garamond.json
new file mode 100644
index 0000000000..2f7d94b7e5
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-luma/font-heading-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-eb-garamond",
+  "title": "EB Garamond (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-luma/hover-card-example.json b/apps/v4/public/r/styles/radix-luma/hover-card-example.json
index d7cf0ce317..cd839e6bb9 100644
--- a/apps/v4/public/r/styles/radix-luma/hover-card-example.json
+++ b/apps/v4/public/r/styles/radix-luma/hover-card-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-luma/examples/hover-card-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-luma/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/radix-luma/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side} openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent side={side} className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side} side of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Hover me\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-luma/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/radix-luma/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side} openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent side={side} className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2 style-sera:gap-2\">\n                <h4 className=\"font-medium style-sera:font-heading style-sera:font-semibold style-sera:tracking-wide\">\n                  Hover Card\n                </h4>\n                <p className=\"style-sera:leading-relaxed\">\n                  This hover card appears on the {side} side of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Hover me\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2 style-sera:gap-2\">\n                <h4 className=\"font-medium style-sera:font-heading style-sera:font-semibold style-sera:tracking-wide\">\n                  Hover Card\n                </h4>\n                <p className=\"style-sera:leading-relaxed\">\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-luma/input-otp-example.json b/apps/v4/public/r/styles/radix-luma/input-otp-example.json
index f5b3cdea51..1e9a36b8bb 100644
--- a/apps/v4/public/r/styles/radix-luma/input-otp-example.json
+++ b/apps/v4/public/r/styles/radix-luma/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-luma/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-luma/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-luma/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-luma/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" 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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\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    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-sm text-muted-foreground\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"underline underline-offset-4 transition-colors hover:text-primary\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-luma/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-luma/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-luma/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" 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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\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    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12 style-sera:*:data-[slot=input-otp-slot]:h-14 style-sera:*:data-[slot=input-otp-slot]:w-10\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12 style-sera:*:data-[slot=input-otp-slot]:h-14 style-sera:*:data-[slot=input-otp-slot]:w-10\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-sm text-muted-foreground\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"underline underline-offset-4 transition-colors hover:text-primary\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-luma/navigation-menu-example.json b/apps/v4/public/r/styles/radix-luma/navigation-menu-example.json
index 02c9f87a04..17ee53a480 100644
--- a/apps/v4/public/r/styles/radix-luma/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/radix-luma/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-luma/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/radix-luma/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"line-clamp-2 text-muted-foreground\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/radix-luma/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n                          Components\n                        </div>\n                        <div className=\"text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n                          Documentation\n                        </div>\n                        <div className=\"text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n                          Blog\n                        </div>\n                        <div className=\"text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n            <div className=\"leading-none font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n              {title}\n            </div>\n            <div className=\"line-clamp-2 text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n              {children}\n            </div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-luma/registry.json b/apps/v4/public/r/styles/radix-luma/registry.json
index 1319c6ec24..a4bd6716d9 100644
--- a/apps/v4/public/r/styles/radix-luma/registry.json
+++ b/apps/v4/public/r/styles/radix-luma/registry.json
@@ -3174,6 +3174,19 @@
         "dependency": "@fontsource-variable/playfair-display"
       }
     },
+    {
+      "name": "font-eb-garamond",
+      "title": "EB Garamond",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
+    },
     {
       "name": "font-heading-geist",
       "title": "Geist (Heading)",
@@ -3485,6 +3498,19 @@
         "subsets": ["latin"],
         "dependency": "@fontsource-variable/playfair-display"
       }
+    },
+    {
+      "name": "font-heading-eb-garamond",
+      "title": "EB Garamond (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
     }
   ]
 }
diff --git a/apps/v4/public/r/styles/radix-luma/resizable-example.json b/apps/v4/public/r/styles/radix-luma/resizable-example.json
index 48babf6de0..691653df14 100644
--- a/apps/v4/public/r/styles/radix-luma/resizable-example.json
+++ b/apps/v4/public/r/styles/radix-luma/resizable-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-luma/examples/resizable-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/radix-luma/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/radix-luma/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-luma/scroll-area-example.json b/apps/v4/public/r/styles/radix-luma/scroll-area-example.json
index 4a9a4ccd60..5ed6c4fdd2 100644
--- a/apps/v4/public/r/styles/radix-luma/scroll-area-example.json
+++ b/apps/v4/public/r/styles/radix-luma/scroll-area-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-luma/examples/scroll-area-example.tsx",
-      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/radix-luma/ui/scroll-area\"\nimport { Separator } from \"@/registry/radix-luma/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 overflow-hidden rounded-md border style-maia:rounded-2xl style-luma:rounded-2xl\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 overflow-hidden rounded-md border p-4 **:data-[slot=scroll-area-viewport]:rounded-md style-maia:rounded-2xl style-luma:rounded-2xl\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-3/4 h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n                Photo by{\" \"}\n                <span className=\"font-semibold text-foreground\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/radix-luma/ui/scroll-area\"\nimport { Separator } from \"@/registry/radix-luma/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 overflow-hidden rounded-md border style-lyra:rounded-none style-maia:rounded-2xl style-luma:rounded-2xl style-sera:rounded-none\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 overflow-hidden rounded-md border p-4 **:data-[slot=scroll-area-viewport]:rounded-md style-lyra:rounded-none style-lyra:**:data-[slot=scroll-area-viewport]:rounded-none style-maia:rounded-2xl style-luma:rounded-2xl style-sera:rounded-none style-sera:**:data-[slot=scroll-area-viewport]:rounded-none\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md style-lyra:rounded-none style-sera:rounded-none\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-3/4 h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n                Photo by{\" \"}\n                <span className=\"font-semibold text-foreground\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-luma/sheet-example.json b/apps/v4/public/r/styles/radix-luma/sheet-example.json
index 1c44f4191e..7ed756e3f8 100644
--- a/apps/v4/public/r/styles/radix-luma/sheet-example.json
+++ b/apps/v4/public/r/styles/radix-luma/sheet-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-luma/examples/sheet-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-luma/ui/field\"\nimport { Input } from \"@/registry/radix-luma/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-luma/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">Open</Button>\n        </SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-luma/ui/field\"\nimport { Input } from \"@/registry/radix-luma/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-luma/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">Open</Button>\n        </SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6 style-sera:px-8\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6 style-sera:px-8\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed style-sera:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-luma/tabs-example.json b/apps/v4/public/r/styles/radix-luma/tabs-example.json
index 0dc1949b46..1520e4af62 100644
--- a/apps/v4/public/r/styles/radix-luma/tabs-example.json
+++ b/apps/v4/public/r/styles/radix-luma/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-luma/examples/tabs-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-luma/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-luma/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-luma/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n              data-icon=\"inline-start\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n              data-icon=\"inline-start\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-luma/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-luma/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-luma/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n              data-icon=\"inline-start\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n              data-icon=\"inline-start\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-luma/tooltip-example.json b/apps/v4/public/r/styles/radix-luma/tooltip-example.json
index 55e739b686..cda5ab60c0 100644
--- a/apps/v4/public/r/styles/radix-luma/tooltip-example.json
+++ b/apps/v4/public/r/styles/radix-luma/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-luma/examples/tooltip-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport { Kbd } from \"@/registry/radix-luma/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-luma/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          Save Changes <Kbd>S</Kbd>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"w-fit text-sm text-primary underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport { Kbd } from \"@/registry/radix-luma/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-luma/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"w-fit capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          Save Changes <Kbd>S</Kbd>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"w-fit text-sm text-primary underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/accordion-example.json b/apps/v4/public/r/styles/radix-lyra/accordion-example.json
index 248fc3af7f..63748b5589 100644
--- a/apps/v4/public/r/styles/radix-lyra/accordion-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/radix-lyra/ui/accordion\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border\"\n          >\n            <AccordionTrigger className=\"font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0 style-luma:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg style-luma:rounded-xl\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"p-1 data-open:bg-muted/50\"\n          >\n            <AccordionTrigger className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/radix-lyra/ui/accordion\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border\"\n          >\n            <AccordionTrigger className=\"font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0 style-luma:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg style-luma:rounded-xl style-sera:rounded-none\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"p-1 data-open:bg-muted/50 style-sera:p-0\"\n          >\n            <AccordionTrigger className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2 style-sera:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2 style-sera:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/alert-example.json b/apps/v4/public/r/styles/radix-lyra/alert-example.json
index 06981e5fc3..2fba9b471e 100644
--- a/apps/v4/public/r/styles/radix-lyra/alert-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/alert-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/alert-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/radix-lyra/ui/alert\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\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 { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n      <AlertExample5 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample5() {\n  return (\n    <Example title=\"Inside Card\">\n      <Card className=\"mx-auto w-full max-w-lg\">\n        <CardHeader>\n          <CardTitle>Create project</CardTitle>\n        </CardHeader>\n        <CardContent className=\"flex flex-col gap-4\">\n          <Alert>\n            <IconPlaceholder\n              lucide=\"CircleAlertIcon\"\n              tabler=\"IconExclamationCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"WarningCircleIcon\"\n              remixicon=\"RiErrorWarningLine\"\n            />\n            <AlertTitle>\n              You have reached the limit of 3 free projects.\n            </AlertTitle>\n            <AlertDescription>\n              Upgrade to Pro to create unlimited projects.\n            </AlertDescription>\n          </Alert>\n          <div className=\"flex flex-col gap-2\">\n            <Label htmlFor=\"project-name\">Name</Label>\n            <Input id=\"project-name\" placeholder=\"My project\" />\n          </div>\n          <div className=\"flex flex-col gap-2\">\n            <Label htmlFor=\"project-framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"project-framework\">\n                <SelectValue placeholder=\"Select a framework\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"next\">Next.js</SelectItem>\n                <SelectItem value=\"remix\">Remix</SelectItem>\n                <SelectItem value=\"astro\">Astro</SelectItem>\n                <SelectItem value=\"nuxt\">Nuxt</SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n          <Item variant=\"outline\">\n            <ItemMedia variant=\"image\" className=\"border\">\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Project Alpha</ItemTitle>\n              <ItemDescription>Created 2 days ago</ItemDescription>\n            </ItemContent>\n          </Item>\n        </CardContent>\n        <CardFooter>\n          <Button className=\"w-full\">Create project</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/radix-lyra/ui/alert\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n      <AlertExample5 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample5() {\n  return (\n    <Example title=\"Inside Card\" className=\"style-sera:bg-transparent\">\n      <Card className=\"mx-auto w-full max-w-lg\">\n        <CardHeader>\n          <CardTitle>Create project</CardTitle>\n          <CardDescription>\n            Fill in the form below to create a new project.\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex flex-col gap-4 style-sera:gap-8\">\n          <Alert>\n            <IconPlaceholder\n              lucide=\"CircleAlertIcon\"\n              tabler=\"IconExclamationCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"WarningCircleIcon\"\n              remixicon=\"RiErrorWarningLine\"\n            />\n            <AlertTitle>\n              You have reached the limit of 3 free projects.\n            </AlertTitle>\n            <AlertDescription>\n              Upgrade to Pro to create unlimited projects.\n            </AlertDescription>\n          </Alert>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\">Name</FieldLabel>\n              <Input id=\"project-name\" placeholder=\"My project\" />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"project-framework\">Framework</FieldLabel>\n              <Select>\n                <SelectTrigger id=\"project-framework\">\n                  <SelectValue placeholder=\"Select a framework\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"next\">Next.js</SelectItem>\n                    <SelectItem value=\"remix\">Remix</SelectItem>\n                    <SelectItem value=\"astro\">Astro</SelectItem>\n                    <SelectItem value=\"nuxt\">Nuxt</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </Field>\n          </FieldGroup>\n          <Item variant=\"outline\">\n            <ItemMedia variant=\"image\" className=\"border\">\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Project Alpha</ItemTitle>\n              <ItemDescription>Created 2 days ago</ItemDescription>\n            </ItemContent>\n          </Item>\n        </CardContent>\n        <CardFooter>\n          <Button className=\"w-full\">Create project</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/aspect-ratio-example.json b/apps/v4/public/r/styles/radix-lyra/aspect-ratio-example.json
index b36b6f2148..dc3f21ce0f 100644
--- a/apps/v4/public/r/styles/radix-lyra/aspect-ratio-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/aspect-ratio-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/aspect-ratio-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { AspectRatio } from \"@/registry/radix-lyra/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={16 / 9}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio\n        ratio={1 / 1}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={9 / 16}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={21 / 9}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { AspectRatio } from \"@/registry/radix-lyra/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={16 / 9}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio\n        ratio={1 / 1}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={9 / 16}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={21 / 9}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/button-group.json b/apps/v4/public/r/styles/radix-lyra/button-group.json
index 3c1921ddd1..b72441cc57 100644
--- a/apps/v4/public/r/styles/radix-lyra/button-group.json
+++ b/apps/v4/public/r/styles/radix-lyra/button-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/button-group.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch rounded-none *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-none border bg-muted px-2.5 text-xs font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"group/button-group flex w-fit items-stretch rounded-none *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-none border bg-muted px-2.5 text-xs font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/chart-example.json b/apps/v4/public/r/styles/radix-lyra/chart-example.json
index 513e2d04ce..8e63c6dc69 100644
--- a/apps/v4/public/r/styles/radix-lyra/chart-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-lyra/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartPieExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={64}\n              outerRadius={94}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-lyra/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartPieExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  const [params] = useDesignSystemSearchParams()\n  const isRounded = ![\"lyra\", \"sera\"].includes(params.style)\n\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                radius={isRounded ? 4 : 0}\n              />\n              <Bar\n                dataKey=\"mobile\"\n                fill=\"var(--color-mobile)\"\n                radius={isRounded ? 4 : 0}\n              />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={64}\n              outerRadius={94}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/combobox-example.json b/apps/v4/public/r/styles/radix-lyra/combobox-example.json
index 25006eff32..e7a6447770 100644
--- a/apps/v4/public/r/styles/radix-lyra/combobox-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-lyra/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/radix-lyra/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} 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 {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"w-52 justify-between font-normal text-muted-foreground\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-lyra/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/radix-lyra/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} 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 {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"w-52 justify-between font-normal text-muted-foreground style-sera:hidden\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/demo.json b/apps/v4/public/r/styles/radix-lyra/demo.json
index f836d318d1..2db80dd9a8 100644
--- a/apps/v4/public/r/styles/radix-lyra/demo.json
+++ b/apps/v4/public/r/styles/radix-lyra/demo.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-lyra/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-lyra/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport { Checkbox } from \"@/registry/radix-lyra/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-lyra/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-lyra/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-lyra/ui/slider\"\nimport { Switch } from \"@/registry/radix-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-lyra/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-lyra/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport { Checkbox } from \"@/registry/radix-lyra/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-lyra/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-lyra/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-lyra/ui/slider\"\nimport { Switch } from \"@/registry/radix-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/drawer-example.json b/apps/v4/public/r/styles/radix-lyra/drawer-example.json
index 37a14ec2bb..e5be0e42ee 100644
--- a/apps/v4/public/r/styles/radix-lyra/drawer-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/drawer-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/drawer-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-lyra/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\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          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-lyra/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed style-sera:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed style-sera:leading-relaxed\"\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          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/dropdown-menu-example.json b/apps/v4/public/r/styles/radix-lyra/dropdown-menu-example.json
index b136e40eb2..8ce5d6f968 100644
--- a/apps/v4/public/r/styles/radix-lyra/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/dropdown-menu-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 {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\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 {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/example.json b/apps/v4/public/r/styles/radix-lyra/example.json
index 5384d66e3d..a49d59d4ae 100644
--- a/apps/v4/public/r/styles/radix-lyra/example.json
+++ b/apps/v4/public/r/styles/radix-lyra/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/components/example.tsx",
-      "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground style-lyra:rounded-none style-sera:rounded-none *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/field.json b/apps/v4/public/r/styles/radix-lyra/field.json
index 00069e8645..b7847901a1 100644
--- a/apps/v4/public/r/styles/radix-lyra/field.json
+++ b/apps/v4/public/r/styles/radix-lyra/field.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Label } from \"@/registry/radix-lyra/ui/label\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-2.5 font-medium data-[variant=label]:text-xs data-[variant=legend]:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-2 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-2 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-xs/relaxed leading-snug group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-xs/relaxed leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-xs group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-xs font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Label } from \"@/registry/radix-lyra/ui/label\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-2.5 font-medium data-[variant=label]:text-xs data-[variant=legend]:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-2 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-2 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-xs/relaxed group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-xs/relaxed leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-xs group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-xs font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/font-eb-garamond.json b/apps/v4/public/r/styles/radix-lyra/font-eb-garamond.json
new file mode 100644
index 0000000000..e3de403ba0
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-lyra/font-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-eb-garamond",
+  "title": "EB Garamond",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/font-heading-eb-garamond.json b/apps/v4/public/r/styles/radix-lyra/font-heading-eb-garamond.json
new file mode 100644
index 0000000000..2f7d94b7e5
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-lyra/font-heading-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-eb-garamond",
+  "title": "EB Garamond (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/hover-card-example.json b/apps/v4/public/r/styles/radix-lyra/hover-card-example.json
index 5a1ff9b7f3..f1d790e01f 100644
--- a/apps/v4/public/r/styles/radix-lyra/hover-card-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/hover-card-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/hover-card-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  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/radix-lyra/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side} openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent side={side} className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side} side of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Hover me\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\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  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/radix-lyra/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side} openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent side={side} className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2 style-sera:gap-2\">\n                <h4 className=\"font-medium style-sera:font-heading style-sera:font-semibold style-sera:tracking-wide\">\n                  Hover Card\n                </h4>\n                <p className=\"style-sera:leading-relaxed\">\n                  This hover card appears on the {side} side of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Hover me\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2 style-sera:gap-2\">\n                <h4 className=\"font-medium style-sera:font-heading style-sera:font-semibold style-sera:tracking-wide\">\n                  Hover Card\n                </h4>\n                <p className=\"style-sera:leading-relaxed\">\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/input-otp-example.json b/apps/v4/public/r/styles/radix-lyra/input-otp-example.json
index 255ee6218f..dd250f9097 100644
--- a/apps/v4/public/r/styles/radix-lyra/input-otp-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-lyra/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-lyra/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" 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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\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    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-sm text-muted-foreground\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"underline underline-offset-4 transition-colors hover:text-primary\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-lyra/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-lyra/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" 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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\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    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12 style-sera:*:data-[slot=input-otp-slot]:h-14 style-sera:*:data-[slot=input-otp-slot]:w-10\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12 style-sera:*:data-[slot=input-otp-slot]:h-14 style-sera:*:data-[slot=input-otp-slot]:w-10\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-sm text-muted-foreground\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"underline underline-offset-4 transition-colors hover:text-primary\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/navigation-menu-example.json b/apps/v4/public/r/styles/radix-lyra/navigation-menu-example.json
index aaffd8ad3f..e83593a51f 100644
--- a/apps/v4/public/r/styles/radix-lyra/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/radix-lyra/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"line-clamp-2 text-muted-foreground\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/radix-lyra/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n                          Components\n                        </div>\n                        <div className=\"text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n                          Documentation\n                        </div>\n                        <div className=\"text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n                          Blog\n                        </div>\n                        <div className=\"text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n            <div className=\"leading-none font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n              {title}\n            </div>\n            <div className=\"line-clamp-2 text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n              {children}\n            </div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/registry.json b/apps/v4/public/r/styles/radix-lyra/registry.json
index f0abb4a4fb..27a92dc3fa 100644
--- a/apps/v4/public/r/styles/radix-lyra/registry.json
+++ b/apps/v4/public/r/styles/radix-lyra/registry.json
@@ -3174,6 +3174,19 @@
         "dependency": "@fontsource-variable/playfair-display"
       }
     },
+    {
+      "name": "font-eb-garamond",
+      "title": "EB Garamond",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
+    },
     {
       "name": "font-heading-geist",
       "title": "Geist (Heading)",
@@ -3485,6 +3498,19 @@
         "subsets": ["latin"],
         "dependency": "@fontsource-variable/playfair-display"
       }
+    },
+    {
+      "name": "font-heading-eb-garamond",
+      "title": "EB Garamond (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
     }
   ]
 }
diff --git a/apps/v4/public/r/styles/radix-lyra/resizable-example.json b/apps/v4/public/r/styles/radix-lyra/resizable-example.json
index 625a477af1..3499f87dd5 100644
--- a/apps/v4/public/r/styles/radix-lyra/resizable-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/resizable-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/resizable-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/radix-lyra/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/radix-lyra/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/scroll-area-example.json b/apps/v4/public/r/styles/radix-lyra/scroll-area-example.json
index eb961fba11..e28c99089f 100644
--- a/apps/v4/public/r/styles/radix-lyra/scroll-area-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/scroll-area-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/scroll-area-example.tsx",
-      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/radix-lyra/ui/scroll-area\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 overflow-hidden rounded-md border style-maia:rounded-2xl style-luma:rounded-2xl\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 overflow-hidden rounded-md border p-4 **:data-[slot=scroll-area-viewport]:rounded-md style-maia:rounded-2xl style-luma:rounded-2xl\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-3/4 h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n                Photo by{\" \"}\n                <span className=\"font-semibold text-foreground\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/radix-lyra/ui/scroll-area\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 overflow-hidden rounded-md border style-lyra:rounded-none style-maia:rounded-2xl style-luma:rounded-2xl style-sera:rounded-none\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 overflow-hidden rounded-md border p-4 **:data-[slot=scroll-area-viewport]:rounded-md style-lyra:rounded-none style-lyra:**:data-[slot=scroll-area-viewport]:rounded-none style-maia:rounded-2xl style-luma:rounded-2xl style-sera:rounded-none style-sera:**:data-[slot=scroll-area-viewport]:rounded-none\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md style-lyra:rounded-none style-sera:rounded-none\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-3/4 h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n                Photo by{\" \"}\n                <span className=\"font-semibold text-foreground\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/sheet-example.json b/apps/v4/public/r/styles/radix-lyra/sheet-example.json
index d7b8733b7c..899a9890ed 100644
--- a/apps/v4/public/r/styles/radix-lyra/sheet-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/sheet-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/sheet-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-lyra/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">Open</Button>\n        </SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\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 { Field, FieldGroup, FieldLabel } from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-lyra/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">Open</Button>\n        </SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6 style-sera:px-8\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6 style-sera:px-8\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed style-sera:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/tabs-example.json b/apps/v4/public/r/styles/radix-lyra/tabs-example.json
index 789a0f41e3..b91efc4859 100644
--- a/apps/v4/public/r/styles/radix-lyra/tabs-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/tabs-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  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-lyra/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n              data-icon=\"inline-start\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n              data-icon=\"inline-start\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\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  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-lyra/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n              data-icon=\"inline-start\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n              data-icon=\"inline-start\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/tooltip-example.json b/apps/v4/public/r/styles/radix-lyra/tooltip-example.json
index e11822db91..b82fe1b825 100644
--- a/apps/v4/public/r/styles/radix-lyra/tooltip-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/tooltip-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Kbd } from \"@/registry/radix-lyra/ui/kbd\"\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 TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          Save Changes <Kbd>S</Kbd>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"w-fit text-sm text-primary underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Kbd } from \"@/registry/radix-lyra/ui/kbd\"\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 TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"w-fit capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          Save Changes <Kbd>S</Kbd>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"w-fit text-sm text-primary underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/accordion-example.json b/apps/v4/public/r/styles/radix-maia/accordion-example.json
index 44efe64829..07f9a4a372 100644
--- a/apps/v4/public/r/styles/radix-maia/accordion-example.json
+++ b/apps/v4/public/r/styles/radix-maia/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/radix-maia/ui/accordion\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border\"\n          >\n            <AccordionTrigger className=\"font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0 style-luma:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg style-luma:rounded-xl\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"p-1 data-open:bg-muted/50\"\n          >\n            <AccordionTrigger className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/radix-maia/ui/accordion\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border\"\n          >\n            <AccordionTrigger className=\"font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0 style-luma:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg style-luma:rounded-xl style-sera:rounded-none\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"p-1 data-open:bg-muted/50 style-sera:p-0\"\n          >\n            <AccordionTrigger className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2 style-sera:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2 style-sera:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/alert-example.json b/apps/v4/public/r/styles/radix-maia/alert-example.json
index d0fe7826aa..4817b4320c 100644
--- a/apps/v4/public/r/styles/radix-maia/alert-example.json
+++ b/apps/v4/public/r/styles/radix-maia/alert-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/alert-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/radix-maia/ui/alert\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\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 { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n      <AlertExample5 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample5() {\n  return (\n    <Example title=\"Inside Card\">\n      <Card className=\"mx-auto w-full max-w-lg\">\n        <CardHeader>\n          <CardTitle>Create project</CardTitle>\n        </CardHeader>\n        <CardContent className=\"flex flex-col gap-4\">\n          <Alert>\n            <IconPlaceholder\n              lucide=\"CircleAlertIcon\"\n              tabler=\"IconExclamationCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"WarningCircleIcon\"\n              remixicon=\"RiErrorWarningLine\"\n            />\n            <AlertTitle>\n              You have reached the limit of 3 free projects.\n            </AlertTitle>\n            <AlertDescription>\n              Upgrade to Pro to create unlimited projects.\n            </AlertDescription>\n          </Alert>\n          <div className=\"flex flex-col gap-2\">\n            <Label htmlFor=\"project-name\">Name</Label>\n            <Input id=\"project-name\" placeholder=\"My project\" />\n          </div>\n          <div className=\"flex flex-col gap-2\">\n            <Label htmlFor=\"project-framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"project-framework\">\n                <SelectValue placeholder=\"Select a framework\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"next\">Next.js</SelectItem>\n                <SelectItem value=\"remix\">Remix</SelectItem>\n                <SelectItem value=\"astro\">Astro</SelectItem>\n                <SelectItem value=\"nuxt\">Nuxt</SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n          <Item variant=\"outline\">\n            <ItemMedia variant=\"image\" className=\"border\">\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Project Alpha</ItemTitle>\n              <ItemDescription>Created 2 days ago</ItemDescription>\n            </ItemContent>\n          </Item>\n        </CardContent>\n        <CardFooter>\n          <Button className=\"w-full\">Create project</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/radix-maia/ui/alert\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n      <AlertExample5 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample5() {\n  return (\n    <Example title=\"Inside Card\" className=\"style-sera:bg-transparent\">\n      <Card className=\"mx-auto w-full max-w-lg\">\n        <CardHeader>\n          <CardTitle>Create project</CardTitle>\n          <CardDescription>\n            Fill in the form below to create a new project.\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex flex-col gap-4 style-sera:gap-8\">\n          <Alert>\n            <IconPlaceholder\n              lucide=\"CircleAlertIcon\"\n              tabler=\"IconExclamationCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"WarningCircleIcon\"\n              remixicon=\"RiErrorWarningLine\"\n            />\n            <AlertTitle>\n              You have reached the limit of 3 free projects.\n            </AlertTitle>\n            <AlertDescription>\n              Upgrade to Pro to create unlimited projects.\n            </AlertDescription>\n          </Alert>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\">Name</FieldLabel>\n              <Input id=\"project-name\" placeholder=\"My project\" />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"project-framework\">Framework</FieldLabel>\n              <Select>\n                <SelectTrigger id=\"project-framework\">\n                  <SelectValue placeholder=\"Select a framework\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"next\">Next.js</SelectItem>\n                    <SelectItem value=\"remix\">Remix</SelectItem>\n                    <SelectItem value=\"astro\">Astro</SelectItem>\n                    <SelectItem value=\"nuxt\">Nuxt</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </Field>\n          </FieldGroup>\n          <Item variant=\"outline\">\n            <ItemMedia variant=\"image\" className=\"border\">\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Project Alpha</ItemTitle>\n              <ItemDescription>Created 2 days ago</ItemDescription>\n            </ItemContent>\n          </Item>\n        </CardContent>\n        <CardFooter>\n          <Button className=\"w-full\">Create project</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/aspect-ratio-example.json b/apps/v4/public/r/styles/radix-maia/aspect-ratio-example.json
index 0b5874c3de..a612c0e2ec 100644
--- a/apps/v4/public/r/styles/radix-maia/aspect-ratio-example.json
+++ b/apps/v4/public/r/styles/radix-maia/aspect-ratio-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/aspect-ratio-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { AspectRatio } from \"@/registry/radix-maia/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={16 / 9}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio\n        ratio={1 / 1}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={9 / 16}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={21 / 9}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { AspectRatio } from \"@/registry/radix-maia/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={16 / 9}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio\n        ratio={1 / 1}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={9 / 16}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={21 / 9}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/button-group.json b/apps/v4/public/r/styles/radix-maia/button-group.json
index b230d663e6..84b438c252 100644
--- a/apps/v4/public/r/styles/radix-maia/button-group.json
+++ b/apps/v4/public/r/styles/radix-maia/button-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/button-group.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-4xl [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-4xl!\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-4xl!\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-4xl border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-4xl [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-4xl!\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-4xl!\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-4xl border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/chart-example.json b/apps/v4/public/r/styles/radix-maia/chart-example.json
index ae6ebe093c..7c145e608d 100644
--- a/apps/v4/public/r/styles/radix-maia/chart-example.json
+++ b/apps/v4/public/r/styles/radix-maia/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-maia/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartPieExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={64}\n              outerRadius={94}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-maia/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartPieExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  const [params] = useDesignSystemSearchParams()\n  const isRounded = ![\"lyra\", \"sera\"].includes(params.style)\n\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                radius={isRounded ? 4 : 0}\n              />\n              <Bar\n                dataKey=\"mobile\"\n                fill=\"var(--color-mobile)\"\n                radius={isRounded ? 4 : 0}\n              />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={64}\n              outerRadius={94}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/combobox-example.json b/apps/v4/public/r/styles/radix-maia/combobox-example.json
index 3415d7f1a4..654273dcc2 100644
--- a/apps/v4/public/r/styles/radix-maia/combobox-example.json
+++ b/apps/v4/public/r/styles/radix-maia/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-maia/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/radix-maia/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} 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 {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"w-52 justify-between font-normal text-muted-foreground\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-maia/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/radix-maia/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} 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 {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"w-52 justify-between font-normal text-muted-foreground style-sera:hidden\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/demo.json b/apps/v4/public/r/styles/radix-maia/demo.json
index 8e052d772f..4026395235 100644
--- a/apps/v4/public/r/styles/radix-maia/demo.json
+++ b/apps/v4/public/r/styles/radix-maia/demo.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-maia/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-maia/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-maia/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-maia/ui/slider\"\nimport { Switch } from \"@/registry/radix-maia/ui/switch\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-maia/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-maia/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-maia/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-maia/ui/slider\"\nimport { Switch } from \"@/registry/radix-maia/ui/switch\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/drawer-example.json b/apps/v4/public/r/styles/radix-maia/drawer-example.json
index 5ee9f749ee..d38654418b 100644
--- a/apps/v4/public/r/styles/radix-maia/drawer-example.json
+++ b/apps/v4/public/r/styles/radix-maia/drawer-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/drawer-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-maia/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\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          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-maia/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed style-sera:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed style-sera:leading-relaxed\"\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          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/dropdown-menu-example.json b/apps/v4/public/r/styles/radix-maia/dropdown-menu-example.json
index a365547dbf..4b4e587e5d 100644
--- a/apps/v4/public/r/styles/radix-maia/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/radix-maia/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/dropdown-menu-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 {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\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 {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/example.json b/apps/v4/public/r/styles/radix-maia/example.json
index dc811b2c69..151896e7c4 100644
--- a/apps/v4/public/r/styles/radix-maia/example.json
+++ b/apps/v4/public/r/styles/radix-maia/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/radix-maia/components/example.tsx",
-      "content": "import { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground style-lyra:rounded-none style-sera:rounded-none *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/field.json b/apps/v4/public/r/styles/radix-maia/field.json
index e7822b20ce..8cecf52b7f 100644
--- a/apps/v4/public/r/styles/radix-maia/field.json
+++ b/apps/v4/public/r/styles/radix-maia/field.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Label } from \"@/registry/radix-maia/ui/label\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Label } from \"@/registry/radix-maia/ui/label\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/font-eb-garamond.json b/apps/v4/public/r/styles/radix-maia/font-eb-garamond.json
new file mode 100644
index 0000000000..e3de403ba0
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-maia/font-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-eb-garamond",
+  "title": "EB Garamond",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/font-heading-eb-garamond.json b/apps/v4/public/r/styles/radix-maia/font-heading-eb-garamond.json
new file mode 100644
index 0000000000..2f7d94b7e5
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-maia/font-heading-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-eb-garamond",
+  "title": "EB Garamond (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/hover-card-example.json b/apps/v4/public/r/styles/radix-maia/hover-card-example.json
index cfadc97e88..c89f215d52 100644
--- a/apps/v4/public/r/styles/radix-maia/hover-card-example.json
+++ b/apps/v4/public/r/styles/radix-maia/hover-card-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/hover-card-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  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/radix-maia/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side} openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent side={side} className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side} side of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Hover me\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\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  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/radix-maia/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side} openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent side={side} className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2 style-sera:gap-2\">\n                <h4 className=\"font-medium style-sera:font-heading style-sera:font-semibold style-sera:tracking-wide\">\n                  Hover Card\n                </h4>\n                <p className=\"style-sera:leading-relaxed\">\n                  This hover card appears on the {side} side of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Hover me\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2 style-sera:gap-2\">\n                <h4 className=\"font-medium style-sera:font-heading style-sera:font-semibold style-sera:tracking-wide\">\n                  Hover Card\n                </h4>\n                <p className=\"style-sera:leading-relaxed\">\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/input-otp-example.json b/apps/v4/public/r/styles/radix-maia/input-otp-example.json
index 41ac289c5b..20e2a2698a 100644
--- a/apps/v4/public/r/styles/radix-maia/input-otp-example.json
+++ b/apps/v4/public/r/styles/radix-maia/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-maia/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-maia/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" 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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\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    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-sm text-muted-foreground\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"underline underline-offset-4 transition-colors hover:text-primary\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-maia/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-maia/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" 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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\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    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12 style-sera:*:data-[slot=input-otp-slot]:h-14 style-sera:*:data-[slot=input-otp-slot]:w-10\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12 style-sera:*:data-[slot=input-otp-slot]:h-14 style-sera:*:data-[slot=input-otp-slot]:w-10\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-sm text-muted-foreground\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"underline underline-offset-4 transition-colors hover:text-primary\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/navigation-menu-example.json b/apps/v4/public/r/styles/radix-maia/navigation-menu-example.json
index 40ebcea372..b6369b3a24 100644
--- a/apps/v4/public/r/styles/radix-maia/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/radix-maia/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/radix-maia/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"line-clamp-2 text-muted-foreground\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/radix-maia/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n                          Components\n                        </div>\n                        <div className=\"text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n                          Documentation\n                        </div>\n                        <div className=\"text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n                          Blog\n                        </div>\n                        <div className=\"text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n            <div className=\"leading-none font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n              {title}\n            </div>\n            <div className=\"line-clamp-2 text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n              {children}\n            </div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/registry.json b/apps/v4/public/r/styles/radix-maia/registry.json
index a2dc48b792..3b27206d43 100644
--- a/apps/v4/public/r/styles/radix-maia/registry.json
+++ b/apps/v4/public/r/styles/radix-maia/registry.json
@@ -3174,6 +3174,19 @@
         "dependency": "@fontsource-variable/playfair-display"
       }
     },
+    {
+      "name": "font-eb-garamond",
+      "title": "EB Garamond",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
+    },
     {
       "name": "font-heading-geist",
       "title": "Geist (Heading)",
@@ -3485,6 +3498,19 @@
         "subsets": ["latin"],
         "dependency": "@fontsource-variable/playfair-display"
       }
+    },
+    {
+      "name": "font-heading-eb-garamond",
+      "title": "EB Garamond (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
     }
   ]
 }
diff --git a/apps/v4/public/r/styles/radix-maia/resizable-example.json b/apps/v4/public/r/styles/radix-maia/resizable-example.json
index 27291ff67e..62b67f7ee2 100644
--- a/apps/v4/public/r/styles/radix-maia/resizable-example.json
+++ b/apps/v4/public/r/styles/radix-maia/resizable-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/resizable-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/radix-maia/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/radix-maia/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/scroll-area-example.json b/apps/v4/public/r/styles/radix-maia/scroll-area-example.json
index ef1a409f62..494e29788a 100644
--- a/apps/v4/public/r/styles/radix-maia/scroll-area-example.json
+++ b/apps/v4/public/r/styles/radix-maia/scroll-area-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/scroll-area-example.tsx",
-      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/radix-maia/ui/scroll-area\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 overflow-hidden rounded-md border style-maia:rounded-2xl style-luma:rounded-2xl\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 overflow-hidden rounded-md border p-4 **:data-[slot=scroll-area-viewport]:rounded-md style-maia:rounded-2xl style-luma:rounded-2xl\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-3/4 h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n                Photo by{\" \"}\n                <span className=\"font-semibold text-foreground\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/radix-maia/ui/scroll-area\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 overflow-hidden rounded-md border style-lyra:rounded-none style-maia:rounded-2xl style-luma:rounded-2xl style-sera:rounded-none\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 overflow-hidden rounded-md border p-4 **:data-[slot=scroll-area-viewport]:rounded-md style-lyra:rounded-none style-lyra:**:data-[slot=scroll-area-viewport]:rounded-none style-maia:rounded-2xl style-luma:rounded-2xl style-sera:rounded-none style-sera:**:data-[slot=scroll-area-viewport]:rounded-none\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md style-lyra:rounded-none style-sera:rounded-none\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-3/4 h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n                Photo by{\" \"}\n                <span className=\"font-semibold text-foreground\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/sheet-example.json b/apps/v4/public/r/styles/radix-maia/sheet-example.json
index 9b77290ead..e554e62bf4 100644
--- a/apps/v4/public/r/styles/radix-maia/sheet-example.json
+++ b/apps/v4/public/r/styles/radix-maia/sheet-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/sheet-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-maia/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">Open</Button>\n        </SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\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 { Field, FieldGroup, FieldLabel } from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-maia/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">Open</Button>\n        </SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6 style-sera:px-8\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6 style-sera:px-8\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed style-sera:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/tabs-example.json b/apps/v4/public/r/styles/radix-maia/tabs-example.json
index 4566cc8f55..9fec1de0c6 100644
--- a/apps/v4/public/r/styles/radix-maia/tabs-example.json
+++ b/apps/v4/public/r/styles/radix-maia/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/tabs-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  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-maia/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n              data-icon=\"inline-start\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n              data-icon=\"inline-start\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\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  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-maia/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n              data-icon=\"inline-start\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n              data-icon=\"inline-start\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/tooltip-example.json b/apps/v4/public/r/styles/radix-maia/tooltip-example.json
index 34566ccaf4..a7b7808799 100644
--- a/apps/v4/public/r/styles/radix-maia/tooltip-example.json
+++ b/apps/v4/public/r/styles/radix-maia/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/tooltip-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Kbd } from \"@/registry/radix-maia/ui/kbd\"\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 TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          Save Changes <Kbd>S</Kbd>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"w-fit text-sm text-primary underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Kbd } from \"@/registry/radix-maia/ui/kbd\"\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 TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"w-fit capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          Save Changes <Kbd>S</Kbd>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"w-fit text-sm text-primary underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/accordion-example.json b/apps/v4/public/r/styles/radix-mira/accordion-example.json
index 9d4c429f8c..9008e717b8 100644
--- a/apps/v4/public/r/styles/radix-mira/accordion-example.json
+++ b/apps/v4/public/r/styles/radix-mira/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/radix-mira/ui/accordion\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border\"\n          >\n            <AccordionTrigger className=\"font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0 style-luma:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg style-luma:rounded-xl\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"p-1 data-open:bg-muted/50\"\n          >\n            <AccordionTrigger className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/radix-mira/ui/accordion\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border\"\n          >\n            <AccordionTrigger className=\"font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0 style-luma:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg style-luma:rounded-xl style-sera:rounded-none\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"p-1 data-open:bg-muted/50 style-sera:p-0\"\n          >\n            <AccordionTrigger className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2 style-sera:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2 style-sera:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/alert-example.json b/apps/v4/public/r/styles/radix-mira/alert-example.json
index 5424c99c8c..9081f25e1a 100644
--- a/apps/v4/public/r/styles/radix-mira/alert-example.json
+++ b/apps/v4/public/r/styles/radix-mira/alert-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/alert-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/radix-mira/ui/alert\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\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 { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n      <AlertExample5 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample5() {\n  return (\n    <Example title=\"Inside Card\">\n      <Card className=\"mx-auto w-full max-w-lg\">\n        <CardHeader>\n          <CardTitle>Create project</CardTitle>\n        </CardHeader>\n        <CardContent className=\"flex flex-col gap-4\">\n          <Alert>\n            <IconPlaceholder\n              lucide=\"CircleAlertIcon\"\n              tabler=\"IconExclamationCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"WarningCircleIcon\"\n              remixicon=\"RiErrorWarningLine\"\n            />\n            <AlertTitle>\n              You have reached the limit of 3 free projects.\n            </AlertTitle>\n            <AlertDescription>\n              Upgrade to Pro to create unlimited projects.\n            </AlertDescription>\n          </Alert>\n          <div className=\"flex flex-col gap-2\">\n            <Label htmlFor=\"project-name\">Name</Label>\n            <Input id=\"project-name\" placeholder=\"My project\" />\n          </div>\n          <div className=\"flex flex-col gap-2\">\n            <Label htmlFor=\"project-framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"project-framework\">\n                <SelectValue placeholder=\"Select a framework\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"next\">Next.js</SelectItem>\n                <SelectItem value=\"remix\">Remix</SelectItem>\n                <SelectItem value=\"astro\">Astro</SelectItem>\n                <SelectItem value=\"nuxt\">Nuxt</SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n          <Item variant=\"outline\">\n            <ItemMedia variant=\"image\" className=\"border\">\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Project Alpha</ItemTitle>\n              <ItemDescription>Created 2 days ago</ItemDescription>\n            </ItemContent>\n          </Item>\n        </CardContent>\n        <CardFooter>\n          <Button className=\"w-full\">Create project</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/radix-mira/ui/alert\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n      <AlertExample5 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample5() {\n  return (\n    <Example title=\"Inside Card\" className=\"style-sera:bg-transparent\">\n      <Card className=\"mx-auto w-full max-w-lg\">\n        <CardHeader>\n          <CardTitle>Create project</CardTitle>\n          <CardDescription>\n            Fill in the form below to create a new project.\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex flex-col gap-4 style-sera:gap-8\">\n          <Alert>\n            <IconPlaceholder\n              lucide=\"CircleAlertIcon\"\n              tabler=\"IconExclamationCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"WarningCircleIcon\"\n              remixicon=\"RiErrorWarningLine\"\n            />\n            <AlertTitle>\n              You have reached the limit of 3 free projects.\n            </AlertTitle>\n            <AlertDescription>\n              Upgrade to Pro to create unlimited projects.\n            </AlertDescription>\n          </Alert>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\">Name</FieldLabel>\n              <Input id=\"project-name\" placeholder=\"My project\" />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"project-framework\">Framework</FieldLabel>\n              <Select>\n                <SelectTrigger id=\"project-framework\">\n                  <SelectValue placeholder=\"Select a framework\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"next\">Next.js</SelectItem>\n                    <SelectItem value=\"remix\">Remix</SelectItem>\n                    <SelectItem value=\"astro\">Astro</SelectItem>\n                    <SelectItem value=\"nuxt\">Nuxt</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </Field>\n          </FieldGroup>\n          <Item variant=\"outline\">\n            <ItemMedia variant=\"image\" className=\"border\">\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Project Alpha</ItemTitle>\n              <ItemDescription>Created 2 days ago</ItemDescription>\n            </ItemContent>\n          </Item>\n        </CardContent>\n        <CardFooter>\n          <Button className=\"w-full\">Create project</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/aspect-ratio-example.json b/apps/v4/public/r/styles/radix-mira/aspect-ratio-example.json
index 5bd593c420..c644832193 100644
--- a/apps/v4/public/r/styles/radix-mira/aspect-ratio-example.json
+++ b/apps/v4/public/r/styles/radix-mira/aspect-ratio-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/aspect-ratio-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { AspectRatio } from \"@/registry/radix-mira/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={16 / 9}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio\n        ratio={1 / 1}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={9 / 16}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={21 / 9}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { AspectRatio } from \"@/registry/radix-mira/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={16 / 9}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio\n        ratio={1 / 1}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={9 / 16}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={21 / 9}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/button-group.json b/apps/v4/public/r/styles/radix-mira/button-group.json
index 47e3684727..42c4446163 100644
--- a/apps/v4/public/r/styles/radix-mira/button-group.json
+++ b/apps/v4/public/r/styles/radix-mira/button-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/button-group.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md!\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md!\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-md border bg-muted px-2.5 text-xs/relaxed font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md!\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md!\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-md border bg-muted px-2.5 text-xs/relaxed font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/chart-example.json b/apps/v4/public/r/styles/radix-mira/chart-example.json
index 97fb93f8f6..e9592472fa 100644
--- a/apps/v4/public/r/styles/radix-mira/chart-example.json
+++ b/apps/v4/public/r/styles/radix-mira/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-mira/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartPieExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={64}\n              outerRadius={94}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-mira/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartPieExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  const [params] = useDesignSystemSearchParams()\n  const isRounded = ![\"lyra\", \"sera\"].includes(params.style)\n\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                radius={isRounded ? 4 : 0}\n              />\n              <Bar\n                dataKey=\"mobile\"\n                fill=\"var(--color-mobile)\"\n                radius={isRounded ? 4 : 0}\n              />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={64}\n              outerRadius={94}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/combobox-example.json b/apps/v4/public/r/styles/radix-mira/combobox-example.json
index 4126b94f1f..10de8da559 100644
--- a/apps/v4/public/r/styles/radix-mira/combobox-example.json
+++ b/apps/v4/public/r/styles/radix-mira/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-mira/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/radix-mira/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} 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 {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"w-52 justify-between font-normal text-muted-foreground\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-mira/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/radix-mira/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} 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 {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"w-52 justify-between font-normal text-muted-foreground style-sera:hidden\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/demo.json b/apps/v4/public/r/styles/radix-mira/demo.json
index b162107c99..c344bd9728 100644
--- a/apps/v4/public/r/styles/radix-mira/demo.json
+++ b/apps/v4/public/r/styles/radix-mira/demo.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-mira/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-mira/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport { Checkbox } from \"@/registry/radix-mira/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-mira/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-mira/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-mira/ui/slider\"\nimport { Switch } from \"@/registry/radix-mira/ui/switch\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-mira/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-mira/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport { Checkbox } from \"@/registry/radix-mira/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-mira/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-mira/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-mira/ui/slider\"\nimport { Switch } from \"@/registry/radix-mira/ui/switch\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/drawer-example.json b/apps/v4/public/r/styles/radix-mira/drawer-example.json
index 4f7a237c33..7573850878 100644
--- a/apps/v4/public/r/styles/radix-mira/drawer-example.json
+++ b/apps/v4/public/r/styles/radix-mira/drawer-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/drawer-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-mira/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\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          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-mira/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed style-sera:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed style-sera:leading-relaxed\"\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          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/dropdown-menu-example.json b/apps/v4/public/r/styles/radix-mira/dropdown-menu-example.json
index 2c026e93e3..7d7ddd6457 100644
--- a/apps/v4/public/r/styles/radix-mira/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/radix-mira/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/dropdown-menu-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 {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\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 {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/example.json b/apps/v4/public/r/styles/radix-mira/example.json
index f5185377ab..e9787aeafb 100644
--- a/apps/v4/public/r/styles/radix-mira/example.json
+++ b/apps/v4/public/r/styles/radix-mira/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/radix-mira/components/example.tsx",
-      "content": "import { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground style-lyra:rounded-none style-sera:rounded-none *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/field.json b/apps/v4/public/r/styles/radix-mira/field.json
index 547fd2f369..92508863ac 100644
--- a/apps/v4/public/r/styles/radix-mira/field.json
+++ b/apps/v4/public/r/styles/radix-mira/field.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Label } from \"@/registry/radix-mira/ui/label\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-2 font-medium data-[variant=label]:text-xs/relaxed data-[variant=legend]:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-4 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-2 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-2 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-xs/relaxed leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-xs/relaxed leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-xs/relaxed group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-xs/relaxed font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Label } from \"@/registry/radix-mira/ui/label\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-2 font-medium data-[variant=label]:text-xs/relaxed data-[variant=legend]:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-4 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-2 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-2 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-xs/relaxed font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-xs/relaxed leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-xs/relaxed group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-xs/relaxed font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/font-eb-garamond.json b/apps/v4/public/r/styles/radix-mira/font-eb-garamond.json
new file mode 100644
index 0000000000..e3de403ba0
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-mira/font-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-eb-garamond",
+  "title": "EB Garamond",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/font-heading-eb-garamond.json b/apps/v4/public/r/styles/radix-mira/font-heading-eb-garamond.json
new file mode 100644
index 0000000000..2f7d94b7e5
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-mira/font-heading-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-eb-garamond",
+  "title": "EB Garamond (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/hover-card-example.json b/apps/v4/public/r/styles/radix-mira/hover-card-example.json
index ef7897e3be..f7da49e752 100644
--- a/apps/v4/public/r/styles/radix-mira/hover-card-example.json
+++ b/apps/v4/public/r/styles/radix-mira/hover-card-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/hover-card-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  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/radix-mira/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side} openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent side={side} className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side} side of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Hover me\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\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  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/radix-mira/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side} openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent side={side} className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2 style-sera:gap-2\">\n                <h4 className=\"font-medium style-sera:font-heading style-sera:font-semibold style-sera:tracking-wide\">\n                  Hover Card\n                </h4>\n                <p className=\"style-sera:leading-relaxed\">\n                  This hover card appears on the {side} side of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Hover me\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2 style-sera:gap-2\">\n                <h4 className=\"font-medium style-sera:font-heading style-sera:font-semibold style-sera:tracking-wide\">\n                  Hover Card\n                </h4>\n                <p className=\"style-sera:leading-relaxed\">\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/input-otp-example.json b/apps/v4/public/r/styles/radix-mira/input-otp-example.json
index 905211de72..ae543638b9 100644
--- a/apps/v4/public/r/styles/radix-mira/input-otp-example.json
+++ b/apps/v4/public/r/styles/radix-mira/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-mira/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-mira/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" 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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\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    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-sm text-muted-foreground\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"underline underline-offset-4 transition-colors hover:text-primary\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-mira/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-mira/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" 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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\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    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12 style-sera:*:data-[slot=input-otp-slot]:h-14 style-sera:*:data-[slot=input-otp-slot]:w-10\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12 style-sera:*:data-[slot=input-otp-slot]:h-14 style-sera:*:data-[slot=input-otp-slot]:w-10\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-sm text-muted-foreground\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"underline underline-offset-4 transition-colors hover:text-primary\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/navigation-menu-example.json b/apps/v4/public/r/styles/radix-mira/navigation-menu-example.json
index a63bb6094f..6dce13fbc0 100644
--- a/apps/v4/public/r/styles/radix-mira/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/radix-mira/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/radix-mira/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"line-clamp-2 text-muted-foreground\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/radix-mira/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n                          Components\n                        </div>\n                        <div className=\"text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n                          Documentation\n                        </div>\n                        <div className=\"text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n                          Blog\n                        </div>\n                        <div className=\"text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n            <div className=\"leading-none font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n              {title}\n            </div>\n            <div className=\"line-clamp-2 text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n              {children}\n            </div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/registry.json b/apps/v4/public/r/styles/radix-mira/registry.json
index acf08733df..8de870d766 100644
--- a/apps/v4/public/r/styles/radix-mira/registry.json
+++ b/apps/v4/public/r/styles/radix-mira/registry.json
@@ -3174,6 +3174,19 @@
         "dependency": "@fontsource-variable/playfair-display"
       }
     },
+    {
+      "name": "font-eb-garamond",
+      "title": "EB Garamond",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
+    },
     {
       "name": "font-heading-geist",
       "title": "Geist (Heading)",
@@ -3485,6 +3498,19 @@
         "subsets": ["latin"],
         "dependency": "@fontsource-variable/playfair-display"
       }
+    },
+    {
+      "name": "font-heading-eb-garamond",
+      "title": "EB Garamond (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
     }
   ]
 }
diff --git a/apps/v4/public/r/styles/radix-mira/resizable-example.json b/apps/v4/public/r/styles/radix-mira/resizable-example.json
index b8ded1b87b..a76a1c37bd 100644
--- a/apps/v4/public/r/styles/radix-mira/resizable-example.json
+++ b/apps/v4/public/r/styles/radix-mira/resizable-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/resizable-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/radix-mira/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/radix-mira/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/scroll-area-example.json b/apps/v4/public/r/styles/radix-mira/scroll-area-example.json
index be0754591d..9b40a1e7bc 100644
--- a/apps/v4/public/r/styles/radix-mira/scroll-area-example.json
+++ b/apps/v4/public/r/styles/radix-mira/scroll-area-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/scroll-area-example.tsx",
-      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/radix-mira/ui/scroll-area\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 overflow-hidden rounded-md border style-maia:rounded-2xl style-luma:rounded-2xl\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 overflow-hidden rounded-md border p-4 **:data-[slot=scroll-area-viewport]:rounded-md style-maia:rounded-2xl style-luma:rounded-2xl\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-3/4 h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n                Photo by{\" \"}\n                <span className=\"font-semibold text-foreground\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/radix-mira/ui/scroll-area\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 overflow-hidden rounded-md border style-lyra:rounded-none style-maia:rounded-2xl style-luma:rounded-2xl style-sera:rounded-none\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 overflow-hidden rounded-md border p-4 **:data-[slot=scroll-area-viewport]:rounded-md style-lyra:rounded-none style-lyra:**:data-[slot=scroll-area-viewport]:rounded-none style-maia:rounded-2xl style-luma:rounded-2xl style-sera:rounded-none style-sera:**:data-[slot=scroll-area-viewport]:rounded-none\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md style-lyra:rounded-none style-sera:rounded-none\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-3/4 h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n                Photo by{\" \"}\n                <span className=\"font-semibold text-foreground\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/sheet-example.json b/apps/v4/public/r/styles/radix-mira/sheet-example.json
index ea7d4dea45..9bbc16a4fc 100644
--- a/apps/v4/public/r/styles/radix-mira/sheet-example.json
+++ b/apps/v4/public/r/styles/radix-mira/sheet-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/sheet-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-mira/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">Open</Button>\n        </SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\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 { Field, FieldGroup, FieldLabel } from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-mira/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">Open</Button>\n        </SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6 style-sera:px-8\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6 style-sera:px-8\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed style-sera:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/tabs-example.json b/apps/v4/public/r/styles/radix-mira/tabs-example.json
index fd3aafeba7..7f8fe620d0 100644
--- a/apps/v4/public/r/styles/radix-mira/tabs-example.json
+++ b/apps/v4/public/r/styles/radix-mira/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/tabs-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  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-mira/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n              data-icon=\"inline-start\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n              data-icon=\"inline-start\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\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  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-mira/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n              data-icon=\"inline-start\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n              data-icon=\"inline-start\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/tooltip-example.json b/apps/v4/public/r/styles/radix-mira/tooltip-example.json
index 9d1d638af2..5f2fa835e5 100644
--- a/apps/v4/public/r/styles/radix-mira/tooltip-example.json
+++ b/apps/v4/public/r/styles/radix-mira/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/tooltip-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Kbd } from \"@/registry/radix-mira/ui/kbd\"\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 TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          Save Changes <Kbd>S</Kbd>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"w-fit text-sm text-primary underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Kbd } from \"@/registry/radix-mira/ui/kbd\"\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 TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"w-fit capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          Save Changes <Kbd>S</Kbd>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"w-fit text-sm text-primary underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/accordion-example.json b/apps/v4/public/r/styles/radix-nova/accordion-example.json
index 8f0ebe6aa7..cb4548e863 100644
--- a/apps/v4/public/r/styles/radix-nova/accordion-example.json
+++ b/apps/v4/public/r/styles/radix-nova/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/radix-nova/ui/accordion\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border\"\n          >\n            <AccordionTrigger className=\"font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0 style-luma:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg style-luma:rounded-xl\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"p-1 data-open:bg-muted/50\"\n          >\n            <AccordionTrigger className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/radix-nova/ui/accordion\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border\"\n          >\n            <AccordionTrigger className=\"font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0 style-luma:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg style-luma:rounded-xl style-sera:rounded-none\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"p-1 data-open:bg-muted/50 style-sera:p-0\"\n          >\n            <AccordionTrigger className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2 style-sera:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2 style-sera:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/alert-example.json b/apps/v4/public/r/styles/radix-nova/alert-example.json
index 3538ff0d7e..94aec68769 100644
--- a/apps/v4/public/r/styles/radix-nova/alert-example.json
+++ b/apps/v4/public/r/styles/radix-nova/alert-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/alert-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/radix-nova/ui/alert\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\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 { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n      <AlertExample5 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample5() {\n  return (\n    <Example title=\"Inside Card\">\n      <Card className=\"mx-auto w-full max-w-lg\">\n        <CardHeader>\n          <CardTitle>Create project</CardTitle>\n        </CardHeader>\n        <CardContent className=\"flex flex-col gap-4\">\n          <Alert>\n            <IconPlaceholder\n              lucide=\"CircleAlertIcon\"\n              tabler=\"IconExclamationCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"WarningCircleIcon\"\n              remixicon=\"RiErrorWarningLine\"\n            />\n            <AlertTitle>\n              You have reached the limit of 3 free projects.\n            </AlertTitle>\n            <AlertDescription>\n              Upgrade to Pro to create unlimited projects.\n            </AlertDescription>\n          </Alert>\n          <div className=\"flex flex-col gap-2\">\n            <Label htmlFor=\"project-name\">Name</Label>\n            <Input id=\"project-name\" placeholder=\"My project\" />\n          </div>\n          <div className=\"flex flex-col gap-2\">\n            <Label htmlFor=\"project-framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"project-framework\">\n                <SelectValue placeholder=\"Select a framework\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"next\">Next.js</SelectItem>\n                <SelectItem value=\"remix\">Remix</SelectItem>\n                <SelectItem value=\"astro\">Astro</SelectItem>\n                <SelectItem value=\"nuxt\">Nuxt</SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n          <Item variant=\"outline\">\n            <ItemMedia variant=\"image\" className=\"border\">\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Project Alpha</ItemTitle>\n              <ItemDescription>Created 2 days ago</ItemDescription>\n            </ItemContent>\n          </Item>\n        </CardContent>\n        <CardFooter>\n          <Button className=\"w-full\">Create project</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/radix-nova/ui/alert\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n      <AlertExample5 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample5() {\n  return (\n    <Example title=\"Inside Card\" className=\"style-sera:bg-transparent\">\n      <Card className=\"mx-auto w-full max-w-lg\">\n        <CardHeader>\n          <CardTitle>Create project</CardTitle>\n          <CardDescription>\n            Fill in the form below to create a new project.\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex flex-col gap-4 style-sera:gap-8\">\n          <Alert>\n            <IconPlaceholder\n              lucide=\"CircleAlertIcon\"\n              tabler=\"IconExclamationCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"WarningCircleIcon\"\n              remixicon=\"RiErrorWarningLine\"\n            />\n            <AlertTitle>\n              You have reached the limit of 3 free projects.\n            </AlertTitle>\n            <AlertDescription>\n              Upgrade to Pro to create unlimited projects.\n            </AlertDescription>\n          </Alert>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\">Name</FieldLabel>\n              <Input id=\"project-name\" placeholder=\"My project\" />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"project-framework\">Framework</FieldLabel>\n              <Select>\n                <SelectTrigger id=\"project-framework\">\n                  <SelectValue placeholder=\"Select a framework\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"next\">Next.js</SelectItem>\n                    <SelectItem value=\"remix\">Remix</SelectItem>\n                    <SelectItem value=\"astro\">Astro</SelectItem>\n                    <SelectItem value=\"nuxt\">Nuxt</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </Field>\n          </FieldGroup>\n          <Item variant=\"outline\">\n            <ItemMedia variant=\"image\" className=\"border\">\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Project Alpha</ItemTitle>\n              <ItemDescription>Created 2 days ago</ItemDescription>\n            </ItemContent>\n          </Item>\n        </CardContent>\n        <CardFooter>\n          <Button className=\"w-full\">Create project</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/aspect-ratio-example.json b/apps/v4/public/r/styles/radix-nova/aspect-ratio-example.json
index 3e2ebc2970..f417c6e7ad 100644
--- a/apps/v4/public/r/styles/radix-nova/aspect-ratio-example.json
+++ b/apps/v4/public/r/styles/radix-nova/aspect-ratio-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/aspect-ratio-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { AspectRatio } from \"@/registry/radix-nova/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={16 / 9}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio\n        ratio={1 / 1}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={9 / 16}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={21 / 9}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { AspectRatio } from \"@/registry/radix-nova/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={16 / 9}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio\n        ratio={1 / 1}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={9 / 16}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={21 / 9}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/button-group.json b/apps/v4/public/r/styles/radix-nova/button-group.json
index 321783be7c..05e6b08d91 100644
--- a/apps/v4/public/r/styles/radix-nova/button-group.json
+++ b/apps/v4/public/r/styles/radix-nova/button-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/button-group.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg!\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg!\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg!\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg!\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/chart-example.json b/apps/v4/public/r/styles/radix-nova/chart-example.json
index af5d48aa60..4c0b9757d4 100644
--- a/apps/v4/public/r/styles/radix-nova/chart-example.json
+++ b/apps/v4/public/r/styles/radix-nova/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-nova/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartPieExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={64}\n              outerRadius={94}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-nova/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartPieExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  const [params] = useDesignSystemSearchParams()\n  const isRounded = ![\"lyra\", \"sera\"].includes(params.style)\n\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                radius={isRounded ? 4 : 0}\n              />\n              <Bar\n                dataKey=\"mobile\"\n                fill=\"var(--color-mobile)\"\n                radius={isRounded ? 4 : 0}\n              />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={64}\n              outerRadius={94}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/combobox-example.json b/apps/v4/public/r/styles/radix-nova/combobox-example.json
index c2d55325a5..3a764df72d 100644
--- a/apps/v4/public/r/styles/radix-nova/combobox-example.json
+++ b/apps/v4/public/r/styles/radix-nova/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-nova/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/radix-nova/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} 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 {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"w-52 justify-between font-normal text-muted-foreground\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-nova/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/radix-nova/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} 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 {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"w-52 justify-between font-normal text-muted-foreground style-sera:hidden\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/demo.json b/apps/v4/public/r/styles/radix-nova/demo.json
index c888286977..2edf0e3b9a 100644
--- a/apps/v4/public/r/styles/radix-nova/demo.json
+++ b/apps/v4/public/r/styles/radix-nova/demo.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-nova/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-nova/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport { Checkbox } from \"@/registry/radix-nova/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-nova/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-nova/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-nova/ui/slider\"\nimport { Switch } from \"@/registry/radix-nova/ui/switch\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-nova/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-nova/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport { Checkbox } from \"@/registry/radix-nova/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-nova/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-nova/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-nova/ui/slider\"\nimport { Switch } from \"@/registry/radix-nova/ui/switch\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/drawer-example.json b/apps/v4/public/r/styles/radix-nova/drawer-example.json
index 1bd6d0dc6c..32fbe38e57 100644
--- a/apps/v4/public/r/styles/radix-nova/drawer-example.json
+++ b/apps/v4/public/r/styles/radix-nova/drawer-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/drawer-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-nova/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\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          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-nova/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed style-sera:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed style-sera:leading-relaxed\"\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          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/dropdown-menu-example.json b/apps/v4/public/r/styles/radix-nova/dropdown-menu-example.json
index db8ec44e1d..7b33b749da 100644
--- a/apps/v4/public/r/styles/radix-nova/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/radix-nova/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/dropdown-menu-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 {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\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 {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/example.json b/apps/v4/public/r/styles/radix-nova/example.json
index 7ac5390a4c..3a93ab51a0 100644
--- a/apps/v4/public/r/styles/radix-nova/example.json
+++ b/apps/v4/public/r/styles/radix-nova/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/radix-nova/components/example.tsx",
-      "content": "import { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground style-lyra:rounded-none style-sera:rounded-none *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/field.json b/apps/v4/public/r/styles/radix-nova/field.json
index f5382795fb..8514fb4f29 100644
--- a/apps/v4/public/r/styles/radix-nova/field.json
+++ b/apps/v4/public/r/styles/radix-nova/field.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Label } from \"@/registry/radix-nova/ui/label\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-2 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Label } from \"@/registry/radix-nova/ui/label\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-2 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/font-eb-garamond.json b/apps/v4/public/r/styles/radix-nova/font-eb-garamond.json
new file mode 100644
index 0000000000..e3de403ba0
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-nova/font-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-eb-garamond",
+  "title": "EB Garamond",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/font-heading-eb-garamond.json b/apps/v4/public/r/styles/radix-nova/font-heading-eb-garamond.json
new file mode 100644
index 0000000000..2f7d94b7e5
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-nova/font-heading-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-eb-garamond",
+  "title": "EB Garamond (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/hover-card-example.json b/apps/v4/public/r/styles/radix-nova/hover-card-example.json
index 09b8cfd877..63bcb8846a 100644
--- a/apps/v4/public/r/styles/radix-nova/hover-card-example.json
+++ b/apps/v4/public/r/styles/radix-nova/hover-card-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/hover-card-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  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/radix-nova/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side} openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent side={side} className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side} side of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Hover me\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\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  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/radix-nova/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side} openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent side={side} className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2 style-sera:gap-2\">\n                <h4 className=\"font-medium style-sera:font-heading style-sera:font-semibold style-sera:tracking-wide\">\n                  Hover Card\n                </h4>\n                <p className=\"style-sera:leading-relaxed\">\n                  This hover card appears on the {side} side of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Hover me\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2 style-sera:gap-2\">\n                <h4 className=\"font-medium style-sera:font-heading style-sera:font-semibold style-sera:tracking-wide\">\n                  Hover Card\n                </h4>\n                <p className=\"style-sera:leading-relaxed\">\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/input-otp-example.json b/apps/v4/public/r/styles/radix-nova/input-otp-example.json
index aafdd8c3e2..c29b3a7cf0 100644
--- a/apps/v4/public/r/styles/radix-nova/input-otp-example.json
+++ b/apps/v4/public/r/styles/radix-nova/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-nova/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-nova/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" 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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\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    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-sm text-muted-foreground\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"underline underline-offset-4 transition-colors hover:text-primary\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-nova/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-nova/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" 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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\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    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12 style-sera:*:data-[slot=input-otp-slot]:h-14 style-sera:*:data-[slot=input-otp-slot]:w-10\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12 style-sera:*:data-[slot=input-otp-slot]:h-14 style-sera:*:data-[slot=input-otp-slot]:w-10\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-sm text-muted-foreground\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"underline underline-offset-4 transition-colors hover:text-primary\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/navigation-menu-example.json b/apps/v4/public/r/styles/radix-nova/navigation-menu-example.json
index 1d5ff05b62..0950f394ae 100644
--- a/apps/v4/public/r/styles/radix-nova/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/radix-nova/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/radix-nova/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"line-clamp-2 text-muted-foreground\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/radix-nova/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n                          Components\n                        </div>\n                        <div className=\"text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n                          Documentation\n                        </div>\n                        <div className=\"text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n                          Blog\n                        </div>\n                        <div className=\"text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n            <div className=\"leading-none font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n              {title}\n            </div>\n            <div className=\"line-clamp-2 text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n              {children}\n            </div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/registry.json b/apps/v4/public/r/styles/radix-nova/registry.json
index d03e6372f5..c3b0b62d41 100644
--- a/apps/v4/public/r/styles/radix-nova/registry.json
+++ b/apps/v4/public/r/styles/radix-nova/registry.json
@@ -3174,6 +3174,19 @@
         "dependency": "@fontsource-variable/playfair-display"
       }
     },
+    {
+      "name": "font-eb-garamond",
+      "title": "EB Garamond",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
+    },
     {
       "name": "font-heading-geist",
       "title": "Geist (Heading)",
@@ -3485,6 +3498,19 @@
         "subsets": ["latin"],
         "dependency": "@fontsource-variable/playfair-display"
       }
+    },
+    {
+      "name": "font-heading-eb-garamond",
+      "title": "EB Garamond (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
     }
   ]
 }
diff --git a/apps/v4/public/r/styles/radix-nova/resizable-example.json b/apps/v4/public/r/styles/radix-nova/resizable-example.json
index 0d8cf7667c..adb21625ca 100644
--- a/apps/v4/public/r/styles/radix-nova/resizable-example.json
+++ b/apps/v4/public/r/styles/radix-nova/resizable-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/resizable-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/radix-nova/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/radix-nova/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/scroll-area-example.json b/apps/v4/public/r/styles/radix-nova/scroll-area-example.json
index 7085e3071b..17a3434f7d 100644
--- a/apps/v4/public/r/styles/radix-nova/scroll-area-example.json
+++ b/apps/v4/public/r/styles/radix-nova/scroll-area-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/scroll-area-example.tsx",
-      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/radix-nova/ui/scroll-area\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 overflow-hidden rounded-md border style-maia:rounded-2xl style-luma:rounded-2xl\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 overflow-hidden rounded-md border p-4 **:data-[slot=scroll-area-viewport]:rounded-md style-maia:rounded-2xl style-luma:rounded-2xl\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-3/4 h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n                Photo by{\" \"}\n                <span className=\"font-semibold text-foreground\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/radix-nova/ui/scroll-area\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 overflow-hidden rounded-md border style-lyra:rounded-none style-maia:rounded-2xl style-luma:rounded-2xl style-sera:rounded-none\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 overflow-hidden rounded-md border p-4 **:data-[slot=scroll-area-viewport]:rounded-md style-lyra:rounded-none style-lyra:**:data-[slot=scroll-area-viewport]:rounded-none style-maia:rounded-2xl style-luma:rounded-2xl style-sera:rounded-none style-sera:**:data-[slot=scroll-area-viewport]:rounded-none\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md style-lyra:rounded-none style-sera:rounded-none\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-3/4 h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n                Photo by{\" \"}\n                <span className=\"font-semibold text-foreground\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/sheet-example.json b/apps/v4/public/r/styles/radix-nova/sheet-example.json
index 72ca41dc74..826a713929 100644
--- a/apps/v4/public/r/styles/radix-nova/sheet-example.json
+++ b/apps/v4/public/r/styles/radix-nova/sheet-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/sheet-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-nova/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">Open</Button>\n        </SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\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 { Field, FieldGroup, FieldLabel } from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-nova/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">Open</Button>\n        </SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6 style-sera:px-8\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6 style-sera:px-8\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed style-sera:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/tabs-example.json b/apps/v4/public/r/styles/radix-nova/tabs-example.json
index 8e0aeba8b2..94b0a82169 100644
--- a/apps/v4/public/r/styles/radix-nova/tabs-example.json
+++ b/apps/v4/public/r/styles/radix-nova/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/tabs-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  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-nova/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n              data-icon=\"inline-start\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n              data-icon=\"inline-start\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\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  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-nova/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n              data-icon=\"inline-start\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n              data-icon=\"inline-start\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/tooltip-example.json b/apps/v4/public/r/styles/radix-nova/tooltip-example.json
index 08ced9e562..5a0d79cfb9 100644
--- a/apps/v4/public/r/styles/radix-nova/tooltip-example.json
+++ b/apps/v4/public/r/styles/radix-nova/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/tooltip-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Kbd } from \"@/registry/radix-nova/ui/kbd\"\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 TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          Save Changes <Kbd>S</Kbd>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"w-fit text-sm text-primary underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Kbd } from \"@/registry/radix-nova/ui/kbd\"\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 TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"w-fit capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          Save Changes <Kbd>S</Kbd>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"w-fit text-sm text-primary underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-sera/accordion-example.json b/apps/v4/public/r/styles/radix-sera/accordion-example.json
new file mode 100644
index 0000000000..01c86289e0
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/accordion-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion-example",
+  "title": "Accordion",
+  "registryDependencies": [
+    "accordion",
+    "button",
+    "card",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/accordion-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/radix-sera/ui/accordion\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-sera/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border\"\n          >\n            <AccordionTrigger className=\"font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0 style-luma:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg style-luma:rounded-xl style-sera:rounded-none\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"p-1 data-open:bg-muted/50 style-sera:p-0\"\n          >\n            <AccordionTrigger className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2 style-sera:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2 style-sera:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/accordion.json b/apps/v4/public/r/styles/radix-sera/accordion.json
new file mode 100644
index 0000000000..397f2d0258
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/accordion.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/accordion.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 rounded-none border border-transparent py-4 text-left text-sm font-semibold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          remixicon=\"RiArrowUpSLine\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"h-(--radix-accordion-content-height) pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/accordion",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/accordion-example.tsx",
+      "api": "https://www.radix-ui.com/primitives/docs/components/accordion.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/alert-dialog-example.json b/apps/v4/public/r/styles/radix-sera/alert-dialog-example.json
new file mode 100644
index 0000000000..724543e129
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/alert-dialog-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-dialog-example",
+  "title": "Alert Dialog",
+  "registryDependencies": [
+    "alert-dialog",
+    "button",
+    "dialog",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/alert-dialog-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-sera/ui/alert-dialog\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-sera/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n  return (\n    <ExampleWrapper>\n      <AlertDialogBasic />\n      <AlertDialogSmall />\n      <AlertDialogWithMedia />\n      <AlertDialogSmallWithMedia />\n      <AlertDialogDestructive />\n      <AlertDialogInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertDialogBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Default</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmall() {\n  return (\n    <Example title=\"Small\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Small</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogWithMedia() {\n  return (\n    <Example title=\"With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Default (Media)</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n                remixicon=\"RiBluetoothLine\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete your account and remove your data\n              from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmallWithMedia() {\n  return (\n    <Example title=\"Small With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Small (Media)</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n                remixicon=\"RiBluetoothLine\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogDestructive() {\n  return (\n    <Example title=\"Destructive\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"destructive\">Delete Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n              <IconPlaceholder\n                lucide=\"Trash2Icon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"Delete02Icon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete this chat conversation. View{\" \"}\n              <a href=\"#\">Settings</a> delete any memories saved during this\n              chat.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel variant=\"ghost\">Cancel</AlertDialogCancel>\n            <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogInDialog() {\n  return (\n    <Example title=\"In Dialog\" className=\"items-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Alert Dialog Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to open an alert dialog.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Open Alert Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/alert-dialog.json b/apps/v4/public/r/styles/radix-sera/alert-dialog.json
new file mode 100644
index 0000000000..153157b731
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/alert-dialog.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-dialog",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/alert-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\n\nfunction AlertDialog({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/20 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-none bg-popover p-6 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-2 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"mb-2 inline-flex size-16 items-center justify-center rounded-none bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"cn-font-heading text-lg tracking-wider uppercase sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"mt-0.5 text-sm leading-relaxed text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Action\n        data-slot=\"alert-dialog-action\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Cancel\n        data-slot=\"alert-dialog-cancel\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/alert-dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-dialog-example.tsx",
+      "api": "https://www.radix-ui.com/primitives/docs/components/alert-dialog.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/alert-example.json b/apps/v4/public/r/styles/radix-sera/alert-example.json
new file mode 100644
index 0000000000..acfbfed742
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/alert-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-example",
+  "title": "Alert",
+  "registryDependencies": [
+    "alert",
+    "badge",
+    "button",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/alert-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/radix-sera/ui/alert\"\nimport { Badge } from \"@/registry/radix-sera/ui/badge\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-sera/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-sera/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-sera/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n      <AlertExample5 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample5() {\n  return (\n    <Example title=\"Inside Card\" className=\"style-sera:bg-transparent\">\n      <Card className=\"mx-auto w-full max-w-lg\">\n        <CardHeader>\n          <CardTitle>Create project</CardTitle>\n          <CardDescription>\n            Fill in the form below to create a new project.\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex flex-col gap-4 style-sera:gap-8\">\n          <Alert>\n            <IconPlaceholder\n              lucide=\"CircleAlertIcon\"\n              tabler=\"IconExclamationCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"WarningCircleIcon\"\n              remixicon=\"RiErrorWarningLine\"\n            />\n            <AlertTitle>\n              You have reached the limit of 3 free projects.\n            </AlertTitle>\n            <AlertDescription>\n              Upgrade to Pro to create unlimited projects.\n            </AlertDescription>\n          </Alert>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\">Name</FieldLabel>\n              <Input id=\"project-name\" placeholder=\"My project\" />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"project-framework\">Framework</FieldLabel>\n              <Select>\n                <SelectTrigger id=\"project-framework\">\n                  <SelectValue placeholder=\"Select a framework\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"next\">Next.js</SelectItem>\n                    <SelectItem value=\"remix\">Remix</SelectItem>\n                    <SelectItem value=\"astro\">Astro</SelectItem>\n                    <SelectItem value=\"nuxt\">Nuxt</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </Field>\n          </FieldGroup>\n          <Item variant=\"outline\">\n            <ItemMedia variant=\"image\" className=\"border\">\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Project Alpha</ItemTitle>\n              <ItemDescription>Created 2 days ago</ItemDescription>\n            </ItemContent>\n          </Item>\n        </CardContent>\n        <CardFooter>\n          <Button className=\"w-full\">Create project</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/alert.json b/apps/v4/public/r/styles/radix-sera/alert.json
new file mode 100644
index 0000000000..82deca21e1
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/alert.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/alert.tsx",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nconst alertVariants = cva(\n  \"group/alert relative grid w-full gap-1 border bg-background px-4 py-3 text-left text-sm after:absolute after:-inset-y-px after:-left-px after:w-0.5 has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground after:bg-foreground\",\n        destructive:\n          \"bg-card text-destructive after:bg-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"cn-font-heading font-sans font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2.5 right-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/alert",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/aspect-ratio-example.json b/apps/v4/public/r/styles/radix-sera/aspect-ratio-example.json
new file mode 100644
index 0000000000..0760e81b5c
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/aspect-ratio-example.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "aspect-ratio-example",
+  "title": "Aspect Ratio",
+  "registryDependencies": [
+    "aspect-ratio",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/aspect-ratio-example.tsx",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { AspectRatio } from \"@/registry/radix-sera/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={16 / 9}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio\n        ratio={1 / 1}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={9 / 16}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={21 / 9}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/aspect-ratio.json b/apps/v4/public/r/styles/radix-sera/aspect-ratio.json
new file mode 100644
index 0000000000..4fde7d8c38
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/aspect-ratio.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "aspect-ratio",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/aspect-ratio.tsx",
+      "content": "\"use client\"\n\nimport { AspectRatio as AspectRatioPrimitive } from \"radix-ui\"\n\nfunction AspectRatio({\n  ...props\n}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {\n  return <AspectRatioPrimitive.Root data-slot=\"aspect-ratio\" {...props} />\n}\n\nexport { AspectRatio }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/aspect-ratio",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/aspect-ratio-example.tsx",
+      "api": "https://www.radix-ui.com/primitives/docs/components/aspect-ratio.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/avatar-example.json b/apps/v4/public/r/styles/radix-sera/avatar-example.json
new file mode 100644
index 0000000000..dd22159e66
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/avatar-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "avatar-example",
+  "title": "Avatar",
+  "registryDependencies": [
+    "avatar",
+    "button",
+    "empty",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/avatar-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/radix-sera/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n  return (\n    <ExampleWrapper>\n      <AvatarSizes />\n      <AvatarWithBadge />\n      <AvatarWithBadgeIcon />\n      <AvatarGroupExample />\n      <AvatarGroupWithCount />\n      <AvatarGroupWithIconCount />\n      <AvatarInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction AvatarSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadge() {\n  return (\n    <Example title=\"Badge\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadgeIcon() {\n  return (\n    <Example title=\"Badge with Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n              remixicon=\"RiCheckLine\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n              remixicon=\"RiCheckLine\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n              remixicon=\"RiCheckLine\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarGroupExample() {\n  return (\n    <Example title=\"Group\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithCount() {\n  return (\n    <Example title=\"Group with Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithIconCount() {\n  return (\n    <Example title=\"Group with Icon Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n            remixicon=\"RiAddLine\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n            remixicon=\"RiAddLine\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/shadcn.png\"\n            alt=\"@shadcn\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n            remixicon=\"RiAddLine\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarInEmpty() {\n  return (\n    <Example title=\"In Empty\">\n      <Empty className=\"w-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n              <AvatarGroupCount>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </AvatarGroupCount>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            Invite Members\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/avatar.json b/apps/v4/public/r/styles/radix-sera/avatar.json
new file mode 100644
index 0000000000..f0a5285133
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/avatar.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "avatar",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/avatar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/avatar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/avatar-example.tsx",
+      "api": "https://www.radix-ui.com/primitives/docs/components/avatar.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/badge-example.json b/apps/v4/public/r/styles/radix-sera/badge-example.json
new file mode 100644
index 0000000000..dd5149d197
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/badge-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge-example",
+  "title": "Badge",
+  "registryDependencies": [
+    "badge",
+    "spinner",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/badge-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Badge } from \"@/registry/radix-sera/ui/badge\"\nimport { Spinner } from \"@/registry/radix-sera/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <BadgeVariants />\n      <BadgeWithIconLeft />\n      <BadgeWithIconRight />\n      <BadgeWithSpinner />\n      <BadgeAsLink />\n      <BadgeLongText />\n      <BadgeCustomColors />\n    </ExampleWrapper>\n  )\n}\n\nfunction BadgeVariants() {\n  return (\n    <Example title=\"Variants\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>Default</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n        <Badge variant=\"ghost\">Ghost</Badge>\n        <Badge variant=\"link\">Link</Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconLeft() {\n  return (\n    <Example title=\"Icon Left\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n            data-icon=\"inline-start\"\n          />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n            data-icon=\"inline-start\"\n          />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n            data-icon=\"inline-start\"\n          />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n            data-icon=\"inline-start\"\n          />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n            data-icon=\"inline-start\"\n          />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n            data-icon=\"inline-start\"\n          />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconRight() {\n  return (\n    <Example title=\"Icon Right\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"secondary\">\n          Secondary\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"destructive\">\n          Destructive\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"outline\">\n          Outline\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"ghost\">\n          Ghost\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"link\">\n          Link\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithSpinner() {\n  return (\n    <Example title=\"With Spinner\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <Spinner data-icon=\"inline-start\" />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeAsLink() {\n  return (\n    <Example title=\"asChild\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge asChild>\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"secondary\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"destructive\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"outline\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"ghost\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"link\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeLongText() {\n  return (\n    <Example title=\"Long Text\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge variant=\"secondary\">\n          A badge with a lot of text to see how it wraps\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeCustomColors() {\n  return (\n    <Example title=\"Custom Colors\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n          Red\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/badge.json b/apps/v4/public/r/styles/radix-sera/badge.json
new file mode 100644
index 0000000000..5ee62319cd
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/badge.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/badge.tsx",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-none border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/badge",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/badge-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/breadcrumb-example.json b/apps/v4/public/r/styles/radix-sera/breadcrumb-example.json
new file mode 100644
index 0000000000..1bd4dea3bc
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/breadcrumb-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-example",
+  "title": "Breadcrumb",
+  "registryDependencies": [
+    "breadcrumb",
+    "dropdown-menu",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/breadcrumb-example.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-sera/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\n\nexport default function BreadcrumbExample() {\n  return (\n    <ExampleWrapper>\n      <BreadcrumbBasic />\n      <BreadcrumbWithDropdown />\n      <BreadcrumbWithLink />\n    </ExampleWrapper>\n  )\n}\n\nfunction BreadcrumbBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center justify-center\">\n      <Breadcrumb>\n        <BreadcrumbList>\n          <BreadcrumbItem>\n            <BreadcrumbLink href=\"#\">Home</BreadcrumbLink>\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n          </BreadcrumbItem>\n        </BreadcrumbList>\n      </Breadcrumb>\n    </Example>\n  )\n}\n\nfunction BreadcrumbWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\" className=\"items-center justify-center\">\n      <Breadcrumb>\n        <BreadcrumbList>\n          <BreadcrumbItem>\n            <BreadcrumbLink href=\"#\">Home</BreadcrumbLink>\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button size=\"icon-sm\" variant=\"ghost\">\n                  <BreadcrumbEllipsis />\n                  <span className=\"sr-only\">Toggle menu</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"start\">\n                <DropdownMenuItem>Documentation</DropdownMenuItem>\n                <DropdownMenuItem>Themes</DropdownMenuItem>\n                <DropdownMenuItem>GitHub</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n          </BreadcrumbItem>\n        </BreadcrumbList>\n      </Breadcrumb>\n    </Example>\n  )\n}\n\nfunction BreadcrumbWithLink() {\n  return (\n    <Example title=\"With Link\" className=\"items-center justify-center\">\n      <Breadcrumb>\n        <BreadcrumbList>\n          <BreadcrumbItem>\n            <BreadcrumbLink asChild>\n              <Link href=\"#\">Home</Link>\n            </BreadcrumbLink>\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <BreadcrumbEllipsis />\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <BreadcrumbLink asChild>\n              <Link href=\"#\">Components</Link>\n            </BreadcrumbLink>\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n          </BreadcrumbItem>\n        </BreadcrumbList>\n      </Breadcrumb>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/breadcrumb.json b/apps/v4/public/r/styles/radix-sera/breadcrumb.json
new file mode 100644
index 0000000000..e68b1470cb
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/breadcrumb.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/breadcrumb.tsx",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"font-normal text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-5 items-center justify-center [&>svg]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n        remixicon=\"RiMoreLine\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/breadcrumb",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/breadcrumb-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/button-example.json b/apps/v4/public/r/styles/radix-sera/button-example.json
new file mode 100644
index 0000000000..1cf22be566
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/button-example.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-example",
+  "title": "Button",
+  "registryDependencies": [
+    "button",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/button-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/button-group-example.json b/apps/v4/public/r/styles/radix-sera/button-group-example.json
new file mode 100644
index 0000000000..c7b4468476
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/button-group-example.json
@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-group-example",
+  "title": "Button Group",
+  "registryDependencies": [
+    "button",
+    "button-group",
+    "dropdown-menu",
+    "field",
+    "input",
+    "input-group",
+    "label",
+    "popover",
+    "select",
+    "tooltip",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/button-group-example.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/radix-sera/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-sera/ui/input-group\"\nimport { Label } from \"@/registry/radix-sera/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-sera/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-sera/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\n            id=\"input-text\"\n            placeholder=\"Type something here...\"\n            className=\"style-luma:border-border\"\n          />\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"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/button-group.json b/apps/v4/public/r/styles/radix-sera/button-group.json
new file mode 100644
index 0000000000..34f6030bba
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/button-group.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-group",
+  "registryDependencies": [
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/button-group.tsx",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 *:data-[slot=input]:px-4 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-border has-[>[data-variant=outline]]:*:data-[slot=input-group]:px-2.5 has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-border has-[>[data-variant=outline]]:*:[[role=combobox]]:px-2.5 has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-ring has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-ring has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:[&>input]:border-border has-[>[data-variant=outline]]:[&>input:focus-visible]:border-ring\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none!\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none!\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 border border-transparent border-b-input bg-transparent px-2.5 text-xs font-semibold uppercase group-has-[>[data-variant=outline]]/button-group:border-border [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/button-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-group-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/button.json b/apps/v4/public/r/styles/radix-sera/button.json
new file mode 100644
index 0000000000..282f07f0cf
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/button.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/button.tsx",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-transparent hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-input/30\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-10 gap-1.5 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4\",\n        xs: \"h-7 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-9 gap-1 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        lg: \"h-11 gap-1.5 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5\",\n        icon: \"size-10\",\n        \"icon-xs\": \"size-7 [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-9\",\n        \"icon-lg\": \"size-11\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/button",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/calendar-example.json b/apps/v4/public/r/styles/radix-sera/calendar-example.json
new file mode 100644
index 0000000000..2a453bc302
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/calendar-example.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-example",
+  "title": "Calendar",
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "card",
+    "field",
+    "input",
+    "label",
+    "popover",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/calendar-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/radix-sera/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-sera/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-sera/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-sera/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-sera/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n      <CalendarInCard />\n      <CalendarInPopover />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"single\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarInPopover() {\n  return (\n    <Example title=\"In Popover\">\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"px-2.5 font-normal\">\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            Open Calendar\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar mode=\"single\" />\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"border-t bg-card\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent className=\"px-4\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-simple\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n              />\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker-range\"\n              variant=\"outline\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n              />\n              {date?.from ? (\n                date.to ? (\n                  <>\n                    {format(date.from, \"LLL dd, y\")} -{\" \"}\n                    {format(date.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(date.from, \"LLL dd, y\")\n                )\n              ) : (\n                <span>Pick a date</span>\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-with-dropdowns-desktop\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDownIcon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-start\"\n                className=\"ml-auto\"\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/calendar.json b/apps/v4/public/r/styles/radix-sera/calendar.json
new file mode 100644
index 0000000000..eaa0051411
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/calendar.json
@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar",
+  "dependencies": [
+    "react-day-picker@latest",
+    "date-fns"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/calendar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/radix-sera/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"group/calendar bg-background p-3 [--cell-radius:0] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"cn-calendar-dropdown-root relative rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute inset-0 bg-popover opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"font-medium select-none\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-(--cell-size) select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] text-muted-foreground select-none\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                remixicon=\"RiArrowLeftSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/calendar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/calendar-example.tsx",
+      "api": "https://react-day-picker.js.org"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/card-example.json b/apps/v4/public/r/styles/radix-sera/card-example.json
new file mode 100644
index 0000000000..be45ec8eb4
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/card-example.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card-example",
+  "title": "Card",
+  "registryDependencies": [
+    "avatar",
+    "button",
+    "card",
+    "field",
+    "input",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/card-example.tsx",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-sera/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center style-nova:mt-2\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                remixicon=\"RiTextWrap\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/card.json b/apps/v4/public/r/styles/radix-sera/card.json
new file mode 100644
index 0000000000..6284f304ed
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/card.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/card.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-8 overflow-hidden bg-card py-8 text-sm text-card-foreground shadow-sm ring-1 ring-foreground/5 has-[>img:first-child]:pt-0 data-[size=sm]:gap-5 data-[size=sm]:py-5 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1.5 rounded-none px-8 group-data-[size=sm]/card:px-5 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-8 group-data-[size=sm]/card:[.border-b]:pb-5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"cn-font-heading text-lg tracking-wider uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm leading-relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-8 group-data-[size=sm]/card:px-5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center px-8 group-data-[size=sm]/card:px-5 [.border-t]:pt-8 group-data-[size=sm]/card:[.border-t]:pt-5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/card-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/carousel-example.json b/apps/v4/public/r/styles/radix-sera/carousel-example.json
new file mode 100644
index 0000000000..b87f6f4b4e
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/carousel-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-example",
+  "title": "Carousel",
+  "registryDependencies": [
+    "card",
+    "carousel",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/carousel-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Card, CardContent } from \"@/registry/radix-sera/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/radix-sera/ui/carousel\"\n\nexport default function CarouselExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <CarouselBasic />\n      <CarouselMultiple />\n      <CarouselWithGap />\n    </ExampleWrapper>\n  )\n}\n\nfunction CarouselBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Carousel className=\"mx-auto max-w-xs sm:max-w-sm\">\n        <CarouselContent>\n          {Array.from({ length: 5 }).map((_, index) => (\n            <CarouselItem key={index}>\n              <div className=\"p-1 style-luma:p-2.5\">\n                <Card>\n                  <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                    <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                  </CardContent>\n                </Card>\n              </div>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n        <CarouselPrevious className=\"hidden sm:inline-flex\" />\n        <CarouselNext className=\"hidden sm:inline-flex\" />\n      </Carousel>\n    </Example>\n  )\n}\n\nfunction CarouselMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Carousel\n        className=\"mx-auto max-w-xs sm:max-w-sm\"\n        opts={{\n          align: \"start\",\n        }}\n      >\n        <CarouselContent>\n          {Array.from({ length: 5 }).map((_, index) => (\n            <CarouselItem key={index} className=\"sm:basis-1/2 lg:basis-1/3\">\n              <div className=\"p-1 style-luma:p-2.5\">\n                <Card>\n                  <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                    <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                  </CardContent>\n                </Card>\n              </div>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n        <CarouselPrevious className=\"hidden sm:inline-flex\" />\n        <CarouselNext className=\"hidden sm:inline-flex\" />\n      </Carousel>\n    </Example>\n  )\n}\n\nfunction CarouselWithGap() {\n  return (\n    <Example title=\"With Gap\">\n      <Carousel className=\"mx-auto max-w-xs sm:max-w-sm\">\n        <CarouselContent className=\"-ml-1\">\n          {Array.from({ length: 5 }).map((_, index) => (\n            <CarouselItem key={index} className=\"pl-1 md:basis-1/2\">\n              <div className=\"p-1 style-luma:p-2.5\">\n                <Card>\n                  <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                    <span className=\"text-2xl font-semibold\">{index + 1}</span>\n                  </CardContent>\n                </Card>\n              </div>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n        <CarouselPrevious className=\"hidden sm:inline-flex\" />\n        <CarouselNext className=\"hidden sm:inline-flex\" />\n      </Carousel>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/carousel.json b/apps/v4/public/r/styles/radix-sera/carousel.json
new file mode 100644
index 0000000000..50cdca10c6
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/carousel.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel",
+  "dependencies": [
+    "embla-carousel-react"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/carousel.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n        remixicon=\"RiArrowLeftSLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  useCarousel,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/carousel",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/carousel-example.tsx",
+      "api": "https://www.embla-carousel.com/get-started/react"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/chart-example.json b/apps/v4/public/r/styles/radix-sera/chart-example.json
new file mode 100644
index 0000000000..6f6dd0a36f
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/chart-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-example",
+  "title": "Chart",
+  "registryDependencies": [
+    "chart",
+    "card",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/chart-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-sera/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-sera/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartPieExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  const [params] = useDesignSystemSearchParams()\n  const isRounded = ![\"lyra\", \"sera\"].includes(params.style)\n\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                radius={isRounded ? 4 : 0}\n              />\n              <Bar\n                dataKey=\"mobile\"\n                fill=\"var(--color-mobile)\"\n                radius={isRounded ? 4 : 0}\n              />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={64}\n              outerRadius={94}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/chart.json b/apps/v4/public/r/styles/radix-sera/chart.json
new file mode 100644
index 0000000000..dbc81c5dd6
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/chart.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart",
+  "dependencies": [
+    "recharts@3.8.0"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/chart.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n  string,\n  {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n>\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  initialDimension = INITIAL_DIMENSION,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n  initialDimension?: {\n    width: number\n    height: number\n  }\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer\n          initialDimension={initialDimension}\n        >\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme ?? config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  } & Omit<\n    RechartsPrimitive.DefaultTooltipContentProps<\n      TooltipValueType,\n      TooltipNameType\n    >,\n    \"accessibilityLayer\"\n  >) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? (config[label]?.label ?? label)\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-32 items-start gap-1.5 bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-sm ring-1 ring-foreground/10\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n            return (\n              <div\n                key={index}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label ?? item.name}\n                        </span>\n                      </div>\n                      {item.value != null && (\n                        <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                          {typeof item.value === \"number\"\n                            ? item.value.toLocaleString()\n                            : String(item.value)}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> & {\n  hideIcon?: boolean\n  nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item, index) => {\n          const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={index}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/chart",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/chart-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/checkbox-example.json b/apps/v4/public/r/styles/radix-sera/checkbox-example.json
new file mode 100644
index 0000000000..5699a7b341
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/checkbox-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-example",
+  "title": "Checkbox",
+  "registryDependencies": [
+    "checkbox",
+    "field",
+    "table",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/checkbox-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Checkbox } from \"@/registry/radix-sera/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/radix-sera/ui/field\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/radix-sera/ui/table\"\n\nexport default function CheckboxExample() {\n  return (\n    <ExampleWrapper>\n      <CheckboxBasic />\n      <CheckboxWithDescription />\n      <CheckboxInvalid />\n      <CheckboxDisabled />\n      <CheckboxWithTitle />\n      <CheckboxInTable />\n      <CheckboxGroup />\n    </ExampleWrapper>\n  )\n}\n\nfunction CheckboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Checkbox id=\"terms\" />\n        <FieldLabel htmlFor=\"terms\">Accept terms and conditions</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CheckboxWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field orientation=\"horizontal\">\n        <Checkbox id=\"terms-2\" defaultChecked />\n        <FieldContent>\n          <FieldLabel htmlFor=\"terms-2\">Accept terms and conditions</FieldLabel>\n          <FieldDescription>\n            By clicking this checkbox, you agree to the terms and conditions.\n          </FieldDescription>\n        </FieldContent>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CheckboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Field orientation=\"horizontal\" data-invalid>\n        <Checkbox id=\"terms-3\" aria-invalid />\n        <FieldLabel htmlFor=\"terms-3\">Accept terms and conditions</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CheckboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field orientation=\"horizontal\">\n        <Checkbox id=\"toggle\" disabled />\n        <FieldLabel htmlFor=\"toggle\">Enable notifications</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CheckboxWithTitle() {\n  return (\n    <Example title=\"With Title\">\n      <FieldGroup>\n        <FieldLabel htmlFor=\"toggle-2\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"toggle-2\" defaultChecked />\n            <FieldContent>\n              <FieldTitle>Enable notifications</FieldTitle>\n              <FieldDescription>\n                You can enable or disable notifications at any time.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldLabel htmlFor=\"toggle-4\">\n          <Field orientation=\"horizontal\" data-disabled>\n            <Checkbox id=\"toggle-4\" disabled />\n            <FieldContent>\n              <FieldTitle>Enable notifications</FieldTitle>\n              <FieldDescription>\n                You can enable or disable notifications at any time.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nconst tableData = [\n  {\n    id: \"1\",\n    name: \"Sarah Chen\",\n    email: \"sarah.chen@example.com\",\n    role: \"Admin\",\n  },\n  {\n    id: \"2\",\n    name: \"Marcus Rodriguez\",\n    email: \"marcus.rodriguez@example.com\",\n    role: \"User\",\n  },\n  {\n    id: \"3\",\n    name: \"Priya Patel\",\n    email: \"priya.patel@example.com\",\n    role: \"User\",\n  },\n  {\n    id: \"4\",\n    name: \"David Kim\",\n    email: \"david.kim@example.com\",\n    role: \"Editor\",\n  },\n]\n\nfunction CheckboxInTable() {\n  const [selectedRows, setSelectedRows] = React.useState<Set<string>>(\n    new Set([\"1\"])\n  )\n\n  const selectAll = selectedRows.size === tableData.length\n\n  const handleSelectAll = (checked: boolean) => {\n    if (checked) {\n      setSelectedRows(new Set(tableData.map((row) => row.id)))\n    } else {\n      setSelectedRows(new Set())\n    }\n  }\n\n  const handleSelectRow = (id: string, checked: boolean) => {\n    const newSelected = new Set(selectedRows)\n    if (checked) {\n      newSelected.add(id)\n    } else {\n      newSelected.delete(id)\n    }\n    setSelectedRows(newSelected)\n  }\n\n  return (\n    <Example title=\"In Table\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-8\">\n              <Checkbox\n                id=\"select-all\"\n                checked={selectAll}\n                onCheckedChange={handleSelectAll}\n              />\n            </TableHead>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead>Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {tableData.map((row) => (\n            <TableRow\n              key={row.id}\n              data-state={selectedRows.has(row.id) ? \"selected\" : undefined}\n            >\n              <TableCell>\n                <Checkbox\n                  id={`row-${row.id}`}\n                  checked={selectedRows.has(row.id)}\n                  onCheckedChange={(checked) =>\n                    handleSelectRow(row.id, checked === true)\n                  }\n                />\n              </TableCell>\n              <TableCell className=\"font-medium\">{row.name}</TableCell>\n              <TableCell>{row.email}</TableCell>\n              <TableCell>{row.role}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction CheckboxGroup() {\n  return (\n    <Example title=\"Group\">\n      <Field>\n        <FieldLabel>Show these items on the desktop:</FieldLabel>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"finder-pref-9k2-hard-disks-ljj\" />\n          <FieldLabel\n            htmlFor=\"finder-pref-9k2-hard-disks-ljj\"\n            className=\"font-normal\"\n          >\n            Hard disks\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"finder-pref-9k2-external-disks-1yg\" />\n          <FieldLabel\n            htmlFor=\"finder-pref-9k2-external-disks-1yg\"\n            className=\"font-normal\"\n          >\n            External disks\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"finder-pref-9k2-cds-dvds-fzt\" />\n          <FieldLabel\n            htmlFor=\"finder-pref-9k2-cds-dvds-fzt\"\n            className=\"font-normal\"\n          >\n            CDs, DVDs, and iPods\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"finder-pref-9k2-connected-servers-6l2\" />\n          <FieldLabel\n            htmlFor=\"finder-pref-9k2-connected-servers-6l2\"\n            className=\"font-normal\"\n          >\n            Connected servers\n          </FieldLabel>\n        </Field>\n      </Field>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/checkbox.json b/apps/v4/public/r/styles/radix-sera/checkbox.json
new file mode 100644
index 0000000000..cd9223b833
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/checkbox.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/checkbox.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer relative flex size-4.5 shrink-0 items-center justify-center rounded-none border border-input bg-transparent transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/checkbox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/checkbox-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/checkbox.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/collapsible-example.json b/apps/v4/public/r/styles/radix-sera/collapsible-example.json
new file mode 100644
index 0000000000..0d45ed362d
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/collapsible-example.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "collapsible-example",
+  "title": "Collapsible",
+  "registryDependencies": [
+    "button",
+    "card",
+    "collapsible",
+    "field",
+    "input",
+    "tabs",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/collapsible-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-sera/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-sera/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/radix-sera/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground\"\n            >\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className=\"transition-transform group-data-[state=open]:rotate-90\"\n              />\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              {fileItem.name}\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"mt-1 ml-5 style-lyra:ml-4\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"w-full justify-start gap-2 text-foreground\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                {isOpen ? (\n                  <IconPlaceholder\n                    lucide=\"MinimizeIcon\"\n                    tabler=\"IconMinimize\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                ) : (\n                  <IconPlaceholder\n                    lucide=\"MaximizeIcon\"\n                    tabler=\"IconMaximize\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                )}\n              </Button>\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/collapsible.json b/apps/v4/public/r/styles/radix-sera/collapsible.json
new file mode 100644
index 0000000000..002bfa10c2
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/collapsible.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "collapsible",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/collapsible.tsx",
+      "content": "\"use client\"\n\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\"\n\nfunction Collapsible({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />\n}\n\nfunction CollapsibleTrigger({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {\n  return (\n    <CollapsiblePrimitive.CollapsibleTrigger\n      data-slot=\"collapsible-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction CollapsibleContent({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {\n  return (\n    <CollapsiblePrimitive.CollapsibleContent\n      data-slot=\"collapsible-content\"\n      {...props}\n    />\n  )\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/collapsible",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/collapsible-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/collapsible.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/combobox-example.json b/apps/v4/public/r/styles/radix-sera/combobox-example.json
new file mode 100644
index 0000000000..201ed09844
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/combobox-example.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox-example",
+  "title": "Combobox",
+  "registryDependencies": [
+    "button",
+    "card",
+    "combobox",
+    "dialog",
+    "field",
+    "input",
+    "input-group",
+    "item",
+    "select",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/combobox-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-sera/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/radix-sera/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-sera/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-sera/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-sera/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-sera/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"w-52 justify-between font-normal text-muted-foreground style-sera:hidden\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/combobox.json b/apps/v4/public/r/styles/radix-sera/combobox.json
new file mode 100644
index 0000000000..82f8de0236
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/combobox.json
@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "combobox",
+  "dependencies": [
+    "@base-ui/react"
+  ],
+  "registryDependencies": [
+    "button",
+    "input-group"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/combobox.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-sera/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"pointer-events-none size-4 text-muted-foreground\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        remixicon=\"RiCloseLine\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            asChild\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          >\n            <ComboboxTrigger />\n          </InputGroupButton>\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"cn-menu-target cn-menu-translucent group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1.5 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-transparent *:data-[slot=input-group]:bg-transparent *:data-[slot=input-group]:px-2.5 *:data-[slot=input-group]:focus-within:border-transparent data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1.5 overflow-y-auto overscroll-contain p-1.5 data-empty:p-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={\n          <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n        }\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\n        \"px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"-mx-1.5 my-1.5 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\n        \"flex min-h-10 flex-wrap items-center gap-1.5 rounded-none border border-transparent border-b-input bg-transparent bg-clip-padding px-0 py-1.5 text-sm transition-[color,border-color] focus-within:border-b-ring has-aria-invalid:border-b-destructive has-data-[slot=combobox-chip]:px-0 dark:has-aria-invalid:border-b-destructive/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-none bg-muted px-2 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            remixicon=\"RiCloseLine\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\"min-w-16 flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/combobox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/combobox-example.tsx",
+      "api": "https://base-ui.com/react/components/combobox"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/command-example.json b/apps/v4/public/r/styles/radix-sera/command-example.json
new file mode 100644
index 0000000000..6dc4b72b22
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/command-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "command-example",
+  "title": "Command",
+  "registryDependencies": [
+    "button",
+    "command",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/command-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-sera/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-sera/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"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/command.json b/apps/v4/public/r/styles/radix-sera/command.json
new file mode 100644
index 0000000000..709633e436
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/command.json
@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "command",
+  "dependencies": [
+    "cmdk"
+  ],
+  "registryDependencies": [
+    "dialog",
+    "input-group"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/command.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/radix-sera/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/radix-sera/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex size-full flex-col overflow-hidden bg-popover text-popover-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"top-1/3 translate-y-0 overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1\">\n      <InputGroup className=\"border-transparent border-b-input bg-transparent px-3\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full px-2 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden p-1.5 text-foreground **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-[0.625rem] **:[[cmdk-group-heading]]:font-semibold **:[[cmdk-group-heading]]:tracking-wider **:[[cmdk-group-heading]]:text-foreground **:[[cmdk-group-heading]]:uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"my-1 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"group/command-item relative flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        phosphor=\"CheckIcon\"\n        remixicon=\"RiCheckLine\"\n        className=\"ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/command",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/command-example.tsx",
+      "api": "https://github.com/dip/cmdk"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/component-example.json b/apps/v4/public/r/styles/radix-sera/component-example.json
new file mode 100644
index 0000000000..10decbbaea
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/component-example.json
@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "component-example",
+  "title": "Example",
+  "registryDependencies": [
+    "alert-dialog",
+    "badge",
+    "button",
+    "card",
+    "combobox",
+    "dropdown-menu",
+    "field",
+    "input",
+    "select",
+    "textarea",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/component-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-sera/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-sera/ui/badge\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-sera/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/radix-sera/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-sera/ui/select\"\nimport { Textarea } from \"@/registry/radix-sera/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger asChild>\n              <Button>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  data-icon=\"inline-start\"\n                />\n                Show Dialog\n              </Button>\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                    remixicon=\"RiBluetoothLine\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                    remixicon=\"RiMore2Line\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                      remixicon=\"RiUserLine\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                      remixicon=\"RiBankCardLine\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                        remixicon=\"RiSettingsLine\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                              remixicon=\"RiKeyboardLine\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                              remixicon=\"RiTranslate\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                      remixicon=\"RiNotificationLine\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                      remixicon=\"RiMailLine\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                              remixicon=\"RiShieldLine\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/context-menu-example.json b/apps/v4/public/r/styles/radix-sera/context-menu-example.json
new file mode 100644
index 0000000000..0a38008b39
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/context-menu-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "context-menu-example",
+  "title": "Context Menu",
+  "registryDependencies": [
+    "button",
+    "context-menu",
+    "dialog",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/context-menu-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/radix-sera/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-sera/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n  return (\n    <ExampleWrapper>\n      <ContextMenuBasic />\n      <ContextMenuWithSides />\n      <ContextMenuWithIcons />\n      <ContextMenuWithShortcuts />\n      <ContextMenuWithSubmenu />\n      <ContextMenuWithGroups />\n      <ContextMenuWithCheckboxes />\n      <ContextMenuWithRadio />\n      <ContextMenuWithDestructive />\n      <ContextMenuInDialog />\n      <ContextMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction ContextMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>Back</ContextMenuItem>\n            <ContextMenuItem disabled>Forward</ContextMenuItem>\n            <ContextMenuItem>Reload</ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ClipboardPasteIcon\"\n                tabler=\"IconClipboard\"\n                hugeicons=\"ClipboardIcon\"\n                phosphor=\"ClipboardIcon\"\n                remixicon=\"RiClipboardLine\"\n              />\n              Paste\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Back\n              <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem disabled>\n              Forward\n              <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Reload\n              <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSub>\n            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                <ContextMenuItem>Name Window...</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem>Developer Tools</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithGroups() {\n  return (\n    <Example title=\"With Groups, Labels & Separators\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>File</ContextMenuLabel>\n            <ContextMenuItem>\n              New File\n              <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Open File\n              <ContextMenuShortcut>⌘O</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Edit</ContextMenuLabel>\n            <ContextMenuItem>\n              Undo\n              <ContextMenuShortcut>⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Redo\n              <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Paste\n              <ContextMenuShortcut>⌘V</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              Delete\n              <ContextMenuShortcut>⌫</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithCheckboxes() {\n  const [showBookmarksBar, setShowBookmarksBar] = React.useState(true)\n  const [showFullUrls, setShowFullUrls] = React.useState(false)\n  const [showDeveloperTools, setShowDeveloperTools] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuCheckboxItem\n              checked={showBookmarksBar}\n              onCheckedChange={setShowBookmarksBar}\n            >\n              Show Bookmarks Bar\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              checked={showFullUrls}\n              onCheckedChange={setShowFullUrls}\n            >\n              Show Full URLs\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              checked={showDeveloperTools}\n              onCheckedChange={setShowDeveloperTools}\n            >\n              Show Developer Tools\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithRadio() {\n  const [user, setUser] = React.useState(\"pedro\")\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>People</ContextMenuLabel>\n            <ContextMenuRadioGroup value={user} onValueChange={setUser}>\n              <ContextMenuRadioItem value=\"pedro\">\n                Pedro Duarte\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"colm\">\n                Colm Tuite\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"system\">System</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </ContextMenuItem>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSides() {\n  return (\n    <Example title=\"With Sides\">\n      <div className=\"grid grid-cols-2 gap-6\">\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (top)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"top\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (right)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"right\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (bottom)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"bottom\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (left)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"left\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction ContextMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Context Menu Example</DialogTitle>\n            <DialogDescription>\n              Right click on the area below to see the context menu.\n            </DialogDescription>\n          </DialogHeader>\n          <ContextMenu>\n            <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n              Right click here\n            </ContextMenuTrigger>\n            <ContextMenuContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuSub>\n                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>\n                <ContextMenuSubContent>\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Save Page...</ContextMenuItem>\n                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                    <ContextMenuItem>Name Window...</ContextMenuItem>\n                  </ContextMenuGroup>\n                  <ContextMenuSeparator />\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Developer Tools</ContextMenuItem>\n                  </ContextMenuGroup>\n                </ContextMenuSubContent>\n              </ContextMenuSub>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuContent>\n          </ContextMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent className=\"w-44\">\n          <ContextMenuGroup>\n            <ContextMenuLabel>Actions</ContextMenuLabel>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem inset>Paste</ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel inset>Appearance</ContextMenuLabel>\n            <ContextMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel inset>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem inset value=\"light\">\n                Light\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem inset value=\"dark\">\n                Dark\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem inset value=\"system\">\n                System\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuSub>\n            <ContextMenuSubTrigger inset>More Options</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/context-menu.json b/apps/v4/public/r/styles/radix-sera/context-menu.json
new file mode 100644
index 0000000000..56ce4c82ce
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/context-menu.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "context-menu",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/context-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"cn-menu-target cn-menu-translucent z-50 max-h-(--radix-context-menu-content-available-height) min-w-48 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/context-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        className=\"cn-rtl-flip ml-auto\"\n      />\n    </ContextMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"cn-menu-target cn-menu-translucent z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase data-inset:pl-9.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"-mx-1.5 my-1.5 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/context-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/context-menu-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/context-menu.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/dashboard-01.json b/apps/v4/public/r/styles/radix-sera/dashboard-01.json
new file mode 100644
index 0000000000..0631fdcc71
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/dashboard-01.json
@@ -0,0 +1,101 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dashboard-01",
+  "title": "Dashboard 01",
+  "description": "A dashboard with sidebar, charts and data table.",
+  "dependencies": [
+    "@dnd-kit/core",
+    "@dnd-kit/modifiers",
+    "@dnd-kit/sortable",
+    "@dnd-kit/utilities",
+    "@tanstack/react-table",
+    "zod"
+  ],
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "chart",
+    "card",
+    "select",
+    "tabs",
+    "table",
+    "toggle-group",
+    "badge",
+    "button",
+    "checkbox",
+    "dropdown-menu",
+    "drawer",
+    "input",
+    "avatar",
+    "sheet",
+    "sonner"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/dashboard-01/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/radix-sera/blocks/dashboard-01/components/app-sidebar\"\nimport { ChartAreaInteractive } from \"@/registry/radix-sera/blocks/dashboard-01/components/chart-area-interactive\"\nimport { DataTable } from \"@/registry/radix-sera/blocks/dashboard-01/components/data-table\"\nimport { SectionCards } from \"@/registry/radix-sera/blocks/dashboard-01/components/section-cards\"\nimport { SiteHeader } from \"@/registry/radix-sera/blocks/dashboard-01/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/radix-sera/ui/sidebar\"\n\nimport data from \"./data.json\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"calc(var(--spacing) * 72)\",\n          \"--header-height\": \"calc(var(--spacing) * 12)\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar variant=\"inset\" />\n      <SidebarInset>\n        <SiteHeader />\n        <div className=\"flex flex-1 flex-col\">\n          <div className=\"@container/main flex flex-1 flex-col gap-2\">\n            <div className=\"flex flex-col gap-4 py-4 md:gap-6 md:py-6\">\n              <SectionCards />\n              <div className=\"px-4 lg:px-6\">\n                <ChartAreaInteractive />\n              </div>\n              <DataTable data={data} />\n            </div>\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/dashboard-01/data.json",
+      "content": "[\n  {\n    \"id\": 1,\n    \"header\": \"Cover page\",\n    \"type\": \"Cover page\",\n    \"status\": \"In Process\",\n    \"target\": \"18\",\n    \"limit\": \"5\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 2,\n    \"header\": \"Table of contents\",\n    \"type\": \"Table of contents\",\n    \"status\": \"Done\",\n    \"target\": \"29\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 3,\n    \"header\": \"Executive summary\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"10\",\n    \"limit\": \"13\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 4,\n    \"header\": \"Technical approach\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"27\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 5,\n    \"header\": \"Design\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"2\",\n    \"limit\": \"16\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 6,\n    \"header\": \"Capabilities\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"20\",\n    \"limit\": \"8\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 7,\n    \"header\": \"Integration with existing systems\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"21\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 8,\n    \"header\": \"Innovation and Advantages\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"25\",\n    \"limit\": \"26\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 9,\n    \"header\": \"Overview of EMR's Innovative Solutions\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"7\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 10,\n    \"header\": \"Advanced Algorithms and Machine Learning\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"30\",\n    \"limit\": \"28\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 11,\n    \"header\": \"Adaptive Communication Protocols\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"9\",\n    \"limit\": \"31\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 12,\n    \"header\": \"Advantages Over Current Technologies\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"12\",\n    \"limit\": \"0\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 13,\n    \"header\": \"Past Performance\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"33\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 14,\n    \"header\": \"Customer Feedback and Satisfaction Levels\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"15\",\n    \"limit\": \"34\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 15,\n    \"header\": \"Implementation Challenges and Solutions\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"3\",\n    \"limit\": \"35\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 16,\n    \"header\": \"Security Measures and Data Protection Policies\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"6\",\n    \"limit\": \"36\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 17,\n    \"header\": \"Scalability and Future Proofing\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"4\",\n    \"limit\": \"37\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 18,\n    \"header\": \"Cost-Benefit Analysis\",\n    \"type\": \"Plain language\",\n    \"status\": \"Done\",\n    \"target\": \"14\",\n    \"limit\": \"38\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 19,\n    \"header\": \"User Training and Onboarding Experience\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"17\",\n    \"limit\": \"39\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 20,\n    \"header\": \"Future Development Roadmap\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"11\",\n    \"limit\": \"40\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 21,\n    \"header\": \"System Architecture Overview\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"24\",\n    \"limit\": \"18\",\n    \"reviewer\": \"Maya Johnson\"\n  },\n  {\n    \"id\": 22,\n    \"header\": \"Risk Management Plan\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"15\",\n    \"limit\": \"22\",\n    \"reviewer\": \"Carlos Rodriguez\"\n  },\n  {\n    \"id\": 23,\n    \"header\": \"Compliance Documentation\",\n    \"type\": \"Legal\",\n    \"status\": \"In Process\",\n    \"target\": \"31\",\n    \"limit\": \"27\",\n    \"reviewer\": \"Sarah Chen\"\n  },\n  {\n    \"id\": 24,\n    \"header\": \"API Documentation\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"8\",\n    \"limit\": \"12\",\n    \"reviewer\": \"Raj Patel\"\n  },\n  {\n    \"id\": 25,\n    \"header\": \"User Interface Mockups\",\n    \"type\": \"Visual\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"25\",\n    \"reviewer\": \"Leila Ahmadi\"\n  },\n  {\n    \"id\": 26,\n    \"header\": \"Database Schema\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"20\",\n    \"reviewer\": \"Thomas Wilson\"\n  },\n  {\n    \"id\": 27,\n    \"header\": \"Testing Methodology\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"17\",\n    \"limit\": \"14\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 28,\n    \"header\": \"Deployment Strategy\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"26\",\n    \"limit\": \"30\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 29,\n    \"header\": \"Budget Breakdown\",\n    \"type\": \"Financial\",\n    \"status\": \"In Process\",\n    \"target\": \"13\",\n    \"limit\": \"16\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 30,\n    \"header\": \"Market Analysis\",\n    \"type\": \"Research\",\n    \"status\": \"Done\",\n    \"target\": \"29\",\n    \"limit\": \"32\",\n    \"reviewer\": \"Sophia Martinez\"\n  },\n  {\n    \"id\": 31,\n    \"header\": \"Competitor Comparison\",\n    \"type\": \"Research\",\n    \"status\": \"In Process\",\n    \"target\": \"21\",\n    \"limit\": \"19\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 32,\n    \"header\": \"Maintenance Plan\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"16\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Alex Thompson\"\n  },\n  {\n    \"id\": 33,\n    \"header\": \"User Personas\",\n    \"type\": \"Research\",\n    \"status\": \"In Process\",\n    \"target\": \"27\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Nina Patel\"\n  },\n  {\n    \"id\": 34,\n    \"header\": \"Accessibility Compliance\",\n    \"type\": \"Legal\",\n    \"status\": \"Done\",\n    \"target\": \"18\",\n    \"limit\": \"21\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 35,\n    \"header\": \"Performance Metrics\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"23\",\n    \"limit\": \"26\",\n    \"reviewer\": \"David Kim\"\n  },\n  {\n    \"id\": 36,\n    \"header\": \"Disaster Recovery Plan\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"14\",\n    \"limit\": \"17\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 37,\n    \"header\": \"Third-party Integrations\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"25\",\n    \"limit\": \"28\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 38,\n    \"header\": \"User Feedback Summary\",\n    \"type\": \"Research\",\n    \"status\": \"Done\",\n    \"target\": \"20\",\n    \"limit\": \"15\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 39,\n    \"header\": \"Localization Strategy\",\n    \"type\": \"Narrative\",\n    \"status\": \"In Process\",\n    \"target\": \"12\",\n    \"limit\": \"19\",\n    \"reviewer\": \"Maria Garcia\"\n  },\n  {\n    \"id\": 40,\n    \"header\": \"Mobile Compatibility\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"28\",\n    \"limit\": \"31\",\n    \"reviewer\": \"James Wilson\"\n  },\n  {\n    \"id\": 41,\n    \"header\": \"Data Migration Plan\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"22\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 42,\n    \"header\": \"Quality Assurance Protocols\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"30\",\n    \"limit\": \"33\",\n    \"reviewer\": \"Priya Singh\"\n  },\n  {\n    \"id\": 43,\n    \"header\": \"Stakeholder Analysis\",\n    \"type\": \"Research\",\n    \"status\": \"In Process\",\n    \"target\": \"11\",\n    \"limit\": \"14\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 44,\n    \"header\": \"Environmental Impact Assessment\",\n    \"type\": \"Research\",\n    \"status\": \"Done\",\n    \"target\": \"24\",\n    \"limit\": \"27\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 45,\n    \"header\": \"Intellectual Property Rights\",\n    \"type\": \"Legal\",\n    \"status\": \"In Process\",\n    \"target\": \"17\",\n    \"limit\": \"20\",\n    \"reviewer\": \"Sarah Johnson\"\n  },\n  {\n    \"id\": 46,\n    \"header\": \"Customer Support Framework\",\n    \"type\": \"Narrative\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"25\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 47,\n    \"header\": \"Version Control Strategy\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"15\",\n    \"limit\": \"18\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 48,\n    \"header\": \"Continuous Integration Pipeline\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"26\",\n    \"limit\": \"29\",\n    \"reviewer\": \"Michael Chen\"\n  },\n  {\n    \"id\": 49,\n    \"header\": \"Regulatory Compliance\",\n    \"type\": \"Legal\",\n    \"status\": \"In Process\",\n    \"target\": \"13\",\n    \"limit\": \"16\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 50,\n    \"header\": \"User Authentication System\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"28\",\n    \"limit\": \"31\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 51,\n    \"header\": \"Data Analytics Framework\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"21\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 52,\n    \"header\": \"Cloud Infrastructure\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"16\",\n    \"limit\": \"19\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 53,\n    \"header\": \"Network Security Measures\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"29\",\n    \"limit\": \"32\",\n    \"reviewer\": \"Lisa Wong\"\n  },\n  {\n    \"id\": 54,\n    \"header\": \"Project Timeline\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"14\",\n    \"limit\": \"17\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 55,\n    \"header\": \"Resource Allocation\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"27\",\n    \"limit\": \"30\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 56,\n    \"header\": \"Team Structure and Roles\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"20\",\n    \"limit\": \"23\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 57,\n    \"header\": \"Communication Protocols\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"15\",\n    \"limit\": \"18\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 58,\n    \"header\": \"Success Metrics\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"30\",\n    \"limit\": \"33\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 59,\n    \"header\": \"Internationalization Support\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"23\",\n    \"limit\": \"26\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 60,\n    \"header\": \"Backup and Recovery Procedures\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"18\",\n    \"limit\": \"21\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 61,\n    \"header\": \"Monitoring and Alerting System\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"25\",\n    \"limit\": \"28\",\n    \"reviewer\": \"Daniel Park\"\n  },\n  {\n    \"id\": 62,\n    \"header\": \"Code Review Guidelines\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"12\",\n    \"limit\": \"15\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 63,\n    \"header\": \"Documentation Standards\",\n    \"type\": \"Technical content\",\n    \"status\": \"In Process\",\n    \"target\": \"27\",\n    \"limit\": \"30\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 64,\n    \"header\": \"Release Management Process\",\n    \"type\": \"Planning\",\n    \"status\": \"Done\",\n    \"target\": \"22\",\n    \"limit\": \"25\",\n    \"reviewer\": \"Assign reviewer\"\n  },\n  {\n    \"id\": 65,\n    \"header\": \"Feature Prioritization Matrix\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"19\",\n    \"limit\": \"22\",\n    \"reviewer\": \"Emma Davis\"\n  },\n  {\n    \"id\": 66,\n    \"header\": \"Technical Debt Assessment\",\n    \"type\": \"Technical content\",\n    \"status\": \"Done\",\n    \"target\": \"24\",\n    \"limit\": \"27\",\n    \"reviewer\": \"Eddie Lake\"\n  },\n  {\n    \"id\": 67,\n    \"header\": \"Capacity Planning\",\n    \"type\": \"Planning\",\n    \"status\": \"In Process\",\n    \"target\": \"21\",\n    \"limit\": \"24\",\n    \"reviewer\": \"Jamik Tashpulatov\"\n  },\n  {\n    \"id\": 68,\n    \"header\": \"Service Level Agreements\",\n    \"type\": \"Legal\",\n    \"status\": \"Done\",\n    \"target\": \"26\",\n    \"limit\": \"29\",\n    \"reviewer\": \"Assign reviewer\"\n  }\n]\n",
+      "type": "registry:file",
+      "target": "app/dashboard/data.json"
+    },
+    {
+      "path": "registry/radix-sera/blocks/dashboard-01/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavDocuments } from \"@/registry/radix-sera/blocks/dashboard-01/components/nav-documents\"\nimport { NavMain } from \"@/registry/radix-sera/blocks/dashboard-01/components/nav-main\"\nimport { NavSecondary } from \"@/registry/radix-sera/blocks/dashboard-01/components/nav-secondary\"\nimport { NavUser } from \"@/registry/radix-sera/blocks/dashboard-01/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Dashboard\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LayoutDashboardIcon\"\n          tabler=\"IconDashboard\"\n          hugeicons=\"DashboardSquare01Icon\"\n          phosphor=\"SquaresFourIcon\"\n          remixicon=\"RiDashboardLine\"\n        />\n      ),\n    },\n    {\n      title: \"Lifecycle\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ListIcon\"\n          tabler=\"IconListDetails\"\n          hugeicons=\"Menu01Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiListUnordered\"\n        />\n      ),\n    },\n    {\n      title: \"Analytics\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartBarIcon\"\n          tabler=\"IconChartBar\"\n          hugeicons=\"ChartHistogramIcon\"\n          phosphor=\"ChartBarIcon\"\n          remixicon=\"RiBarChartLine\"\n        />\n      ),\n    },\n    {\n      title: \"Projects\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FolderIcon\"\n          tabler=\"IconFolder\"\n          hugeicons=\"Folder01Icon\"\n          phosphor=\"FolderIcon\"\n          remixicon=\"RiFolderLine\"\n        />\n      ),\n    },\n    {\n      title: \"Team\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"UsersIcon\"\n          tabler=\"IconUsers\"\n          hugeicons=\"UserGroupIcon\"\n          phosphor=\"UsersIcon\"\n          remixicon=\"RiGroupLine\"\n        />\n      ),\n    },\n  ],\n  navClouds: [\n    {\n      title: \"Capture\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CameraIcon\"\n          tabler=\"IconCamera\"\n          hugeicons=\"Camera01Icon\"\n          phosphor=\"CameraIcon\"\n          remixicon=\"RiCameraLine\"\n        />\n      ),\n      isActive: true,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Proposal\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileDescription\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Prompts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileAi\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      title: \"Get Help\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CircleHelpIcon\"\n          tabler=\"IconHelp\"\n          hugeicons=\"HelpCircleIcon\"\n          phosphor=\"QuestionIcon\"\n          remixicon=\"RiQuestionLine\"\n        />\n      ),\n    },\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SearchIcon\"\n          tabler=\"IconSearch\"\n          hugeicons=\"SearchIcon\"\n          phosphor=\"MagnifyingGlassIcon\"\n          remixicon=\"RiSearchLine\"\n        />\n      ),\n    },\n  ],\n  documents: [\n    {\n      name: \"Data Library\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"DatabaseIcon\"\n          tabler=\"IconDatabase\"\n          hugeicons=\"Database01Icon\"\n          phosphor=\"DatabaseIcon\"\n          remixicon=\"RiDatabase2Line\"\n        />\n      ),\n    },\n    {\n      name: \"Reports\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileChartColumnIcon\"\n          tabler=\"IconReport\"\n          hugeicons=\"Analytics01Icon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiFileChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Word Assistant\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFileWord\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"offcanvas\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton\n              asChild\n              className=\"data-[slot=sidebar-menu-button]:p-1.5!\"\n            >\n              <a href=\"#\">\n                <IconPlaceholder\n                  lucide=\"CommandIcon\"\n                  tabler=\"IconInnerShadowTop\"\n                  hugeicons=\"CommandIcon\"\n                  phosphor=\"CommandIcon\"\n                  remixicon=\"RiCommandLine\"\n                  className=\"size-5!\"\n                />\n                <span className=\"text-base font-semibold\">Acme Inc.</span>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavDocuments items={data.documents} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/dashboard-01/components/chart-area-interactive.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { useIsMobile } from \"@/registry/radix-sera/hooks/use-mobile\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-sera/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-sera/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-sera/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/radix-sera/ui/toggle-group\"\n\nexport const description = \"An interactive area chart\"\n\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaInteractive() {\n  const isMobile = useIsMobile()\n  const [timeRange, setTimeRange] = React.useState(\"90d\")\n\n  React.useEffect(() => {\n    if (isMobile) {\n      setTimeRange(\"7d\")\n    }\n  }, [isMobile])\n\n  const filteredData = chartData.filter((item) => {\n    const date = new Date(item.date)\n    const referenceDate = new Date(\"2024-06-30\")\n    let daysToSubtract = 90\n    if (timeRange === \"30d\") {\n      daysToSubtract = 30\n    } else if (timeRange === \"7d\") {\n      daysToSubtract = 7\n    }\n    const startDate = new Date(referenceDate)\n    startDate.setDate(startDate.getDate() - daysToSubtract)\n    return date >= startDate\n  })\n\n  return (\n    <Card className=\"@container/card\">\n      <CardHeader>\n        <CardTitle>Total Visitors</CardTitle>\n        <CardDescription>\n          <span className=\"hidden @[540px]/card:block\">\n            Total for the last 3 months\n          </span>\n          <span className=\"@[540px]/card:hidden\">Last 3 months</span>\n        </CardDescription>\n        <CardAction>\n          <ToggleGroup\n            type=\"single\"\n            value={timeRange}\n            onValueChange={setTimeRange}\n            variant=\"outline\"\n            className=\"hidden *:data-[slot=toggle-group-item]:px-4! @[767px]/card:flex\"\n          >\n            <ToggleGroupItem value=\"90d\">Last 3 months</ToggleGroupItem>\n            <ToggleGroupItem value=\"30d\">Last 30 days</ToggleGroupItem>\n            <ToggleGroupItem value=\"7d\">Last 7 days</ToggleGroupItem>\n          </ToggleGroup>\n          <Select value={timeRange} onValueChange={setTimeRange}>\n            <SelectTrigger\n              className=\"flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden\"\n              size=\"sm\"\n              aria-label=\"Select a value\"\n            >\n              <SelectValue placeholder=\"Last 3 months\" />\n            </SelectTrigger>\n            <SelectContent className=\"rounded-xl\">\n              <SelectItem value=\"90d\" className=\"rounded-lg\">\n                Last 3 months\n              </SelectItem>\n              <SelectItem value=\"30d\" className=\"rounded-lg\">\n                Last 30 days\n              </SelectItem>\n              <SelectItem value=\"7d\" className=\"rounded-lg\">\n                Last 7 days\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </CardAction>\n      </CardHeader>\n      <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <AreaChart data={filteredData}>\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={1.0}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                    })\n                  }}\n                  indicator=\"dot\"\n                />\n              }\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/dashboard-01/components/data-table.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-sera/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-sera/ui/badge\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-sera/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-sera/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-sera/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport { Label } from \"@/registry/radix-sera/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-sera/ui/select\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/radix-sera/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-sera/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"size-3 text-muted-foreground\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\n\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={\n            table.getIsAllPageRowsSelected() ||\n            (table.getIsSomePageRowsSelected() && \"indeterminate\")\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select>\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            className=\"flex size-8 text-muted-foreground data-[state=open]:bg-muted\"\n            size=\"icon\"\n          >\n            <IconPlaceholder\n              lucide=\"EllipsisVerticalIcon\"\n              tabler=\"IconDotsVertical\"\n              hugeicons=\"MoreVerticalCircle01Icon\"\n              phosphor=\"DotsThreeVerticalIcon\"\n              remixicon=\"RiMore2Line\"\n            />\n            <span className=\"sr-only\">Open menu</span>\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\n\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\n\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select defaultValue=\"outline\">\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"sm\">\n                <IconPlaceholder\n                  lucide=\"Columns3Icon\"\n                  tabler=\"IconLayoutColumns\"\n                  hugeicons=\"LeftToRightListBulletIcon\"\n                  phosphor=\"ColumnsIcon\"\n                  remixicon=\"RiLayoutColumnLine\"\n                  data-icon=\"inline-start\"\n                />\n                Columns\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                  data-icon=\"inline-end\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"w-fit px-0 text-left text-foreground\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select defaultValue={item.type}>\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select defaultValue={item.status}>\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select defaultValue={item.reviewer}>\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Done</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/dashboard-01/components/nav-documents.tsx",
+      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavDocuments({\n  items,\n}: {\n  items: {\n    name: string\n    url: string\n    icon: React.ReactNode\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Documents</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                {item.icon}\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"rounded-sm data-[state=open]:bg-accent\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-24 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"Folder01Icon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Open</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare3\"\n                    hugeicons=\"Share01Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                  <span>Share</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"Trash2Icon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n              className=\"text-sidebar-foreground/70\"\n            />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/dashboard-01/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground\"\n            >\n              <IconPlaceholder\n                lucide=\"CirclePlusIcon\"\n                tabler=\"IconCirclePlusFilled\"\n                hugeicons=\"PlusSignCircleIcon\"\n                phosphor=\"PlusCircleIcon\"\n                remixicon=\"RiAddCircleFill\"\n              />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"Mail01Icon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/dashboard-01/components/nav-secondary.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  {item.icon}\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/dashboard-01/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg grayscale\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  {user.email}\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"EllipsisVerticalIcon\"\n                tabler=\"IconDotsVertical\"\n                hugeicons=\"MoreVerticalCircle01Icon\"\n                phosphor=\"DotsThreeVerticalIcon\"\n                remixicon=\"RiMore2Line\"\n                className=\"ml-auto size-4\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs text-muted-foreground\">\n                    {user.email}\n                  </span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleUserRoundIcon\"\n                  tabler=\"IconUserCircle\"\n                  hugeicons=\"UserCircle02Icon\"\n                  phosphor=\"UserCircleIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconNotification\"\n                  hugeicons=\"Notification03Icon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotification3Line\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"Logout01Icon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/dashboard-01/components/section-cards.tsx",
+      "content": "\"use client\"\n\nimport { Badge } from \"@/registry/radix-sera/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-sera/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingDownIcon\"\n                tabler=\"IconTrendingDown\"\n                hugeicons=\"ChartDownIcon\"\n                phosphor=\"TrendDownIcon\"\n                remixicon=\"RiArrowDownLine\"\n              />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingDownIcon\"\n              tabler=\"IconTrendingDown\"\n              hugeicons=\"ChartDownIcon\"\n              phosphor=\"TrendDownIcon\"\n              remixicon=\"RiArrowDownLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/dashboard-01/components/site-header.tsx",
+      "content": "import { Button } from \"@/registry/radix-sera/ui/button\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\nimport { SidebarTrigger } from \"@/registry/radix-sera/ui/sidebar\"\n\nexport function SiteHeader() {\n  return (\n    <header className=\"flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)\">\n      <div className=\"flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6\">\n        <SidebarTrigger className=\"-ml-1\" />\n        <Separator\n          orientation=\"vertical\"\n          className=\"mx-2 data-[orientation=vertical]:h-4\"\n        />\n        <h1 className=\"text-base font-medium\">Documents</h1>\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "iframeHeight": "1000px"
+  },
+  "categories": [
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/demo.json b/apps/v4/public/r/styles/radix-sera/demo.json
new file mode 100644
index 0000000000..436a4d5db4
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/demo.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo",
+  "title": "Demo",
+  "registryDependencies": [
+    "alert-dialog",
+    "badge",
+    "button",
+    "button-group",
+    "card",
+    "checkbox",
+    "dropdown-menu",
+    "field",
+    "input-group",
+    "item",
+    "radio-group",
+    "slider",
+    "switch",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-sera/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-sera/ui/badge\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-sera/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-sera/ui/card\"\nimport { Checkbox } from \"@/registry/radix-sera/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-sera/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-sera/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-sera/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-sera/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-sera/ui/slider\"\nimport { Switch } from \"@/registry/radix-sera/ui/switch\"\nimport { Textarea } from \"@/registry/radix-sera/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/dialog-example.json b/apps/v4/public/r/styles/radix-sera/dialog-example.json
new file mode 100644
index 0000000000..213d5d4788
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/dialog-example.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog-example",
+  "title": "Dialog",
+  "registryDependencies": [
+    "button",
+    "checkbox",
+    "dialog",
+    "field",
+    "input",
+    "input-group",
+    "kbd",
+    "native-select",
+    "select",
+    "switch",
+    "tabs",
+    "textarea",
+    "tooltip",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/dialog-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport { Checkbox } from \"@/registry/radix-sera/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-sera/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-sera/ui/input-group\"\nimport { Kbd } from \"@/registry/radix-sera/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-sera/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-sera/ui/select\"\nimport { Switch } from \"@/registry/radix-sera/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-sera/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-sera/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-sera/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=\"no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4 style-luma:-mx-6 style-luma:px-6\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\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=\"no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4 style-luma:-mx-6 style-luma:px-6\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\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=\"border style-vega:min-h-[550px] style-vega:rounded-lg style-vega:p-6 style-nova:min-h-[460px] style-nova:rounded-lg style-nova:p-4 style-lyra:min-h-[450px] style-lyra:rounded-none style-lyra:p-4 style-maia:min-h-[550px] style-maia:rounded-xl style-maia:p-6 style-mira:min-h-[450px] style-mira:rounded-md style-mira:p-4 style-luma:min-h-[550px] style-luma:rounded-xl style-luma:p-6 [&_[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"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/dialog.json b/apps/v4/public/r/styles/radix-sera/dialog.json
new file mode 100644
index 0000000000..57d6486cc6
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/dialog.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/20 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-none bg-popover p-6 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-5 right-5 bg-secondary\"\n              size=\"icon-sm\"\n            >\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\n        \"cn-font-heading text-lg leading-none tracking-wider uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"mt-0.5 text-sm leading-relaxed text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dialog-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/direction.json b/apps/v4/public/r/styles/radix-sera/direction.json
new file mode 100644
index 0000000000..b5006ec0b5
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/direction.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "direction",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/direction.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Direction } from \"radix-ui\"\n\nfunction DirectionProvider({\n  dir,\n  direction,\n  children,\n}: React.ComponentProps<typeof Direction.DirectionProvider> & {\n  direction?: React.ComponentProps<typeof Direction.DirectionProvider>[\"dir\"]\n}) {\n  return (\n    <Direction.DirectionProvider dir={direction ?? dir}>\n      {children}\n    </Direction.DirectionProvider>\n  )\n}\n\nconst useDirection = Direction.useDirection\n\nexport { DirectionProvider, useDirection }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/direction",
+      "api": "https://www.radix-ui.com/primitives/docs/utilities/direction-provider.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/drawer-example.json b/apps/v4/public/r/styles/radix-sera/drawer-example.json
new file mode 100644
index 0000000000..987911ff96
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/drawer-example.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer-example",
+  "title": "Drawer",
+  "registryDependencies": [
+    "drawer",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/drawer-example.tsx",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-sera/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed style-sera:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed style-sera:leading-relaxed\"\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          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/drawer.json b/apps/v4/public/r/styles/radix-sera/drawer.json
new file mode 100644
index 0000000000..1f9d82aadf
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/drawer.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer",
+  "dependencies": [
+    "vaul"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/drawer.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/radix-sera/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(\n        \"fixed inset-0 z-50 bg-black/20 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\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          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground 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=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t 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=left]:rounded-none data-[vaul-drawer-direction=left]:border-r 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=right]:rounded-none data-[vaul-drawer-direction=right]:border-l 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=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-none bg-muted 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(\n        \"flex flex-col 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:gap-2 md:text-left\",\n        className\n      )}\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(\"mt-auto flex flex-col gap-2 p-4\", 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(\n        \"cn-font-heading text-lg tracking-wider text-foreground uppercase\",\n        className\n      )}\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(\n        \"mt-0.5 text-sm leading-relaxed text-muted-foreground\",\n        className\n      )}\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"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/drawer",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/drawer-example.tsx",
+      "api": "https://vaul.emilkowal.ski/getting-started"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/dropdown-menu-example.json b/apps/v4/public/r/styles/radix-sera/dropdown-menu-example.json
new file mode 100644
index 0000000000..1951b95425
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/dropdown-menu-example.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu-example",
+  "title": "Dropdown Menu",
+  "registryDependencies": [
+    "avatar",
+    "button",
+    "dialog",
+    "dropdown-menu",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/dropdown-menu-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-sera/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/dropdown-menu.json b/apps/v4/public/r/styles/radix-sera/dropdown-menu.json
new file mode 100644
index 0000000000..e53926da66
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/dropdown-menu.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/dropdown-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"cn-menu-target cn-menu-translucent z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase data-inset:pl-9.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"-mx-1.5 my-1.5 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        className=\"cn-rtl-flip ml-auto\"\n      />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"cn-menu-target cn-menu-translucent z-50 min-w-36 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/dropdown-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/dropdown-menu.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/empty-example.json b/apps/v4/public/r/styles/radix-sera/empty-example.json
new file mode 100644
index 0000000000..5f744b5698
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/empty-example.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "empty-example",
+  "title": "Empty",
+  "registryDependencies": [
+    "button",
+    "empty",
+    "input-group",
+    "kbd",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/empty-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/radix-sera/ui/empty\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-sera/ui/input-group\"\nimport { Kbd } from \"@/registry/radix-sera/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n  return (\n    <ExampleWrapper className=\"grid-cols-1!\">\n      <EmptyBasic />\n      <EmptyWithMutedBackground />\n      <EmptyWithBorder />\n      <EmptyWithIcon />\n      <EmptyWithMutedBackgroundAlt />\n      <EmptyInCard />\n    </ExampleWrapper>\n  )\n}\n\nfunction EmptyBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n                remixicon=\"RiArrowRightUpLine\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackground() {\n  return (\n    <Example title=\"With Muted Background\">\n      <Empty className=\"bg-muted\">\n        <EmptyHeader>\n          <EmptyTitle>No results found</EmptyTitle>\n          <EmptyDescription>\n            No results found for your search. Try adjusting your search terms.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Try again</Button>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n                remixicon=\"RiArrowRightUpLine\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithBorder() {\n  return (\n    <Example title=\"With Border\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n                remixicon=\"RiLoaderLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n              remixicon=\"RiFolderLine\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>Nothing to see here</EmptyTitle>\n          <EmptyDescription>\n            No posts have been created yet. Get started by{\" \"}\n            <a href=\"#\">creating your first post</a>.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            New Post\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n  return (\n    <Example title=\"With Muted Background Alt\">\n      <Empty className=\"bg-muted/50\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n                remixicon=\"RiLoaderLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n              remixicon=\"RiFolderLine\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n                remixicon=\"RiArrowRightUpLine\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/empty.json b/apps/v4/public/r/styles/radix-sera/empty.json
new file mode 100644
index 0000000000..f71d1ecd30
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/empty.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "empty",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/empty.tsx",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 border-dashed p-12 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"flex size-10 shrink-0 items-center justify-center rounded-none bg-muted text-foreground [&_svg:not([class*='size-'])]:size-5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\n        \"cn-font-heading text-lg tracking-wider uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"mt-0.5 text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/empty",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/empty-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/example.json b/apps/v4/public/r/styles/radix-sera/example.json
new file mode 100644
index 0000000000..1e33fb2ed4
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/example.json
@@ -0,0 +1,13 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "example",
+  "title": "Example",
+  "files": [
+    {
+      "path": "registry/radix-sera/components/example.tsx",
+      "content": "import { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground style-lyra:rounded-none style-sera:rounded-none *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "type": "registry:component"
+    }
+  ],
+  "type": "registry:component"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/field-example.json b/apps/v4/public/r/styles/radix-sera/field-example.json
new file mode 100644
index 0000000000..c1dcd9ddf2
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/field-example.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "field-example",
+  "title": "Field",
+  "registryDependencies": [
+    "badge",
+    "checkbox",
+    "field",
+    "input",
+    "input-otp",
+    "native-select",
+    "radio-group",
+    "select",
+    "slider",
+    "switch",
+    "textarea",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/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-sera/components/example\"\nimport { Badge } from \"@/registry/radix-sera/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-sera/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-sera/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-sera/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-sera/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-sera/ui/select\"\nimport { Slider } from \"@/registry/radix-sera/ui/slider\"\nimport { Switch } from \"@/registry/radix-sera/ui/switch\"\nimport { Textarea } from \"@/registry/radix-sera/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"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/field.json b/apps/v4/public/r/styles/radix-sera/field.json
new file mode 100644
index 0000000000..4ebce45213
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/field.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "field",
+  "registryDependencies": [
+    "label",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/field.tsx",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Label } from \"@/registry/radix-sera/ui/label\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-semibold uppercase data-[variant=label]:text-xs data-[variant=legend]:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-10 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-relaxed group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-4 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-xs font-semibold tracking-wide uppercase group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal tracking-normal text-muted-foreground normal-case group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/field",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/field-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-dm-sans.json b/apps/v4/public/r/styles/radix-sera/font-dm-sans.json
new file mode 100644
index 0000000000..6653f1e694
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-dm-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-dm-sans",
+  "title": "DM Sans",
+  "type": "registry:font",
+  "font": {
+    "family": "'DM Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "DM_Sans",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/dm-sans"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-eb-garamond.json b/apps/v4/public/r/styles/radix-sera/font-eb-garamond.json
new file mode 100644
index 0000000000..e3de403ba0
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-eb-garamond",
+  "title": "EB Garamond",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-figtree.json b/apps/v4/public/r/styles/radix-sera/font-figtree.json
new file mode 100644
index 0000000000..619b04be2b
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-figtree.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-figtree",
+  "title": "Figtree",
+  "type": "registry:font",
+  "font": {
+    "family": "'Figtree Variable', sans-serif",
+    "provider": "google",
+    "import": "Figtree",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/figtree"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-geist-mono.json b/apps/v4/public/r/styles/radix-sera/font-geist-mono.json
new file mode 100644
index 0000000000..0f7a46db84
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-geist-mono.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-geist-mono",
+  "title": "Geist Mono",
+  "type": "registry:font",
+  "font": {
+    "family": "'Geist Mono Variable', monospace",
+    "provider": "google",
+    "import": "Geist_Mono",
+    "variable": "--font-mono",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/geist-mono"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-geist.json b/apps/v4/public/r/styles/radix-sera/font-geist.json
new file mode 100644
index 0000000000..4f736f50f6
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-geist.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-geist",
+  "title": "Geist",
+  "type": "registry:font",
+  "font": {
+    "family": "'Geist Variable', sans-serif",
+    "provider": "google",
+    "import": "Geist",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/geist"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-dm-sans.json b/apps/v4/public/r/styles/radix-sera/font-heading-dm-sans.json
new file mode 100644
index 0000000000..0ca8a27aad
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-dm-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-dm-sans",
+  "title": "DM Sans (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'DM Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "DM_Sans",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/dm-sans"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-eb-garamond.json b/apps/v4/public/r/styles/radix-sera/font-heading-eb-garamond.json
new file mode 100644
index 0000000000..2f7d94b7e5
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-eb-garamond",
+  "title": "EB Garamond (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-figtree.json b/apps/v4/public/r/styles/radix-sera/font-heading-figtree.json
new file mode 100644
index 0000000000..a1931b2b65
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-figtree.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-figtree",
+  "title": "Figtree (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Figtree Variable', sans-serif",
+    "provider": "google",
+    "import": "Figtree",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/figtree"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-geist-mono.json b/apps/v4/public/r/styles/radix-sera/font-heading-geist-mono.json
new file mode 100644
index 0000000000..6e84ecfa45
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-geist-mono.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-geist-mono",
+  "title": "Geist Mono (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Geist Mono Variable', monospace",
+    "provider": "google",
+    "import": "Geist_Mono",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/geist-mono"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-geist.json b/apps/v4/public/r/styles/radix-sera/font-heading-geist.json
new file mode 100644
index 0000000000..9da82386f5
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-geist.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-geist",
+  "title": "Geist (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Geist Variable', sans-serif",
+    "provider": "google",
+    "import": "Geist",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/geist"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-ibm-plex-sans.json b/apps/v4/public/r/styles/radix-sera/font-heading-ibm-plex-sans.json
new file mode 100644
index 0000000000..3f43f8497f
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-ibm-plex-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-ibm-plex-sans",
+  "title": "IBM Plex Sans (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'IBM Plex Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "IBM_Plex_Sans",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/ibm-plex-sans"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-instrument-sans.json b/apps/v4/public/r/styles/radix-sera/font-heading-instrument-sans.json
new file mode 100644
index 0000000000..7ae2a162d6
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-instrument-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-instrument-sans",
+  "title": "Instrument Sans (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Instrument Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "Instrument_Sans",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/instrument-sans"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-inter.json b/apps/v4/public/r/styles/radix-sera/font-heading-inter.json
new file mode 100644
index 0000000000..25de09568a
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-inter.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-inter",
+  "title": "Inter (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Inter Variable', sans-serif",
+    "provider": "google",
+    "import": "Inter",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/inter"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-jetbrains-mono.json b/apps/v4/public/r/styles/radix-sera/font-heading-jetbrains-mono.json
new file mode 100644
index 0000000000..4baaa9f941
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-jetbrains-mono.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-jetbrains-mono",
+  "title": "JetBrains Mono (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'JetBrains Mono Variable', monospace",
+    "provider": "google",
+    "import": "JetBrains_Mono",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/jetbrains-mono"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-lora.json b/apps/v4/public/r/styles/radix-sera/font-heading-lora.json
new file mode 100644
index 0000000000..790db18b00
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-lora.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-lora",
+  "title": "Lora (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Lora Variable', serif",
+    "provider": "google",
+    "import": "Lora",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/lora"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-manrope.json b/apps/v4/public/r/styles/radix-sera/font-heading-manrope.json
new file mode 100644
index 0000000000..fc7a5dd2d1
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-manrope.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-manrope",
+  "title": "Manrope (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Manrope Variable', sans-serif",
+    "provider": "google",
+    "import": "Manrope",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/manrope"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-merriweather.json b/apps/v4/public/r/styles/radix-sera/font-heading-merriweather.json
new file mode 100644
index 0000000000..080780b294
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-merriweather.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-merriweather",
+  "title": "Merriweather (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Merriweather Variable', serif",
+    "provider": "google",
+    "import": "Merriweather",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/merriweather"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-montserrat.json b/apps/v4/public/r/styles/radix-sera/font-heading-montserrat.json
new file mode 100644
index 0000000000..5a2d30d113
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-montserrat.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-montserrat",
+  "title": "Montserrat (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Montserrat Variable', sans-serif",
+    "provider": "google",
+    "import": "Montserrat",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/montserrat"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-noto-sans.json b/apps/v4/public/r/styles/radix-sera/font-heading-noto-sans.json
new file mode 100644
index 0000000000..e92c056e9a
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-noto-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-noto-sans",
+  "title": "Noto Sans (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Noto Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "Noto_Sans",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/noto-sans"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-noto-serif.json b/apps/v4/public/r/styles/radix-sera/font-heading-noto-serif.json
new file mode 100644
index 0000000000..b0d9967606
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-noto-serif.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-noto-serif",
+  "title": "Noto Serif (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Noto Serif Variable', serif",
+    "provider": "google",
+    "import": "Noto_Serif",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/noto-serif"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-nunito-sans.json b/apps/v4/public/r/styles/radix-sera/font-heading-nunito-sans.json
new file mode 100644
index 0000000000..38bb0f2ed1
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-nunito-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-nunito-sans",
+  "title": "Nunito Sans (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Nunito Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "Nunito_Sans",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/nunito-sans"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-outfit.json b/apps/v4/public/r/styles/radix-sera/font-heading-outfit.json
new file mode 100644
index 0000000000..c438086533
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-outfit.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-outfit",
+  "title": "Outfit (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Outfit Variable', sans-serif",
+    "provider": "google",
+    "import": "Outfit",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/outfit"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-oxanium.json b/apps/v4/public/r/styles/radix-sera/font-heading-oxanium.json
new file mode 100644
index 0000000000..0347430744
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-oxanium.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-oxanium",
+  "title": "Oxanium (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Oxanium Variable', sans-serif",
+    "provider": "google",
+    "import": "Oxanium",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/oxanium"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-playfair-display.json b/apps/v4/public/r/styles/radix-sera/font-heading-playfair-display.json
new file mode 100644
index 0000000000..0041579cc7
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-playfair-display.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-playfair-display",
+  "title": "Playfair Display (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Playfair Display Variable', serif",
+    "provider": "google",
+    "import": "Playfair_Display",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/playfair-display"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-public-sans.json b/apps/v4/public/r/styles/radix-sera/font-heading-public-sans.json
new file mode 100644
index 0000000000..790ceaa123
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-public-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-public-sans",
+  "title": "Public Sans (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Public Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "Public_Sans",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/public-sans"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-raleway.json b/apps/v4/public/r/styles/radix-sera/font-heading-raleway.json
new file mode 100644
index 0000000000..23c30652f1
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-raleway.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-raleway",
+  "title": "Raleway (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Raleway Variable', sans-serif",
+    "provider": "google",
+    "import": "Raleway",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/raleway"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-roboto-slab.json b/apps/v4/public/r/styles/radix-sera/font-heading-roboto-slab.json
new file mode 100644
index 0000000000..172ff07f7c
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-roboto-slab.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-roboto-slab",
+  "title": "Roboto Slab (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Roboto Slab Variable', serif",
+    "provider": "google",
+    "import": "Roboto_Slab",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/roboto-slab"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-roboto.json b/apps/v4/public/r/styles/radix-sera/font-heading-roboto.json
new file mode 100644
index 0000000000..d3c2aa0d6b
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-roboto.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-roboto",
+  "title": "Roboto (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Roboto Variable', sans-serif",
+    "provider": "google",
+    "import": "Roboto",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/roboto"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-source-sans-3.json b/apps/v4/public/r/styles/radix-sera/font-heading-source-sans-3.json
new file mode 100644
index 0000000000..17fd3a0744
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-source-sans-3.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-source-sans-3",
+  "title": "Source Sans 3 (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Source Sans 3 Variable', sans-serif",
+    "provider": "google",
+    "import": "Source_Sans_3",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/source-sans-3"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-heading-space-grotesk.json b/apps/v4/public/r/styles/radix-sera/font-heading-space-grotesk.json
new file mode 100644
index 0000000000..32bbf7d39f
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-heading-space-grotesk.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-space-grotesk",
+  "title": "Space Grotesk (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Space Grotesk Variable', sans-serif",
+    "provider": "google",
+    "import": "Space_Grotesk",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/space-grotesk"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-ibm-plex-sans.json b/apps/v4/public/r/styles/radix-sera/font-ibm-plex-sans.json
new file mode 100644
index 0000000000..148c9b40b6
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-ibm-plex-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-ibm-plex-sans",
+  "title": "IBM Plex Sans",
+  "type": "registry:font",
+  "font": {
+    "family": "'IBM Plex Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "IBM_Plex_Sans",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/ibm-plex-sans"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-instrument-sans.json b/apps/v4/public/r/styles/radix-sera/font-instrument-sans.json
new file mode 100644
index 0000000000..93a96875fc
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-instrument-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-instrument-sans",
+  "title": "Instrument Sans",
+  "type": "registry:font",
+  "font": {
+    "family": "'Instrument Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "Instrument_Sans",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/instrument-sans"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-inter.json b/apps/v4/public/r/styles/radix-sera/font-inter.json
new file mode 100644
index 0000000000..bab7e82d62
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-inter.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-inter",
+  "title": "Inter",
+  "type": "registry:font",
+  "font": {
+    "family": "'Inter Variable', sans-serif",
+    "provider": "google",
+    "import": "Inter",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/inter"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-jetbrains-mono.json b/apps/v4/public/r/styles/radix-sera/font-jetbrains-mono.json
new file mode 100644
index 0000000000..2e5daf5916
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-jetbrains-mono.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-jetbrains-mono",
+  "title": "JetBrains Mono",
+  "type": "registry:font",
+  "font": {
+    "family": "'JetBrains Mono Variable', monospace",
+    "provider": "google",
+    "import": "JetBrains_Mono",
+    "variable": "--font-mono",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/jetbrains-mono"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-lora.json b/apps/v4/public/r/styles/radix-sera/font-lora.json
new file mode 100644
index 0000000000..3fb6dabf90
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-lora.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-lora",
+  "title": "Lora",
+  "type": "registry:font",
+  "font": {
+    "family": "'Lora Variable', serif",
+    "provider": "google",
+    "import": "Lora",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/lora"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-manrope.json b/apps/v4/public/r/styles/radix-sera/font-manrope.json
new file mode 100644
index 0000000000..d11ab4b5bb
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-manrope.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-manrope",
+  "title": "Manrope",
+  "type": "registry:font",
+  "font": {
+    "family": "'Manrope Variable', sans-serif",
+    "provider": "google",
+    "import": "Manrope",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/manrope"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-merriweather.json b/apps/v4/public/r/styles/radix-sera/font-merriweather.json
new file mode 100644
index 0000000000..587a03ac9e
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-merriweather.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-merriweather",
+  "title": "Merriweather",
+  "type": "registry:font",
+  "font": {
+    "family": "'Merriweather Variable', serif",
+    "provider": "google",
+    "import": "Merriweather",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/merriweather"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-montserrat.json b/apps/v4/public/r/styles/radix-sera/font-montserrat.json
new file mode 100644
index 0000000000..fbc12486c2
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-montserrat.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-montserrat",
+  "title": "Montserrat",
+  "type": "registry:font",
+  "font": {
+    "family": "'Montserrat Variable', sans-serif",
+    "provider": "google",
+    "import": "Montserrat",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/montserrat"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-noto-sans.json b/apps/v4/public/r/styles/radix-sera/font-noto-sans.json
new file mode 100644
index 0000000000..e63fdd05b1
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-noto-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-noto-sans",
+  "title": "Noto Sans",
+  "type": "registry:font",
+  "font": {
+    "family": "'Noto Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "Noto_Sans",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/noto-sans"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-noto-serif.json b/apps/v4/public/r/styles/radix-sera/font-noto-serif.json
new file mode 100644
index 0000000000..659b749166
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-noto-serif.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-noto-serif",
+  "title": "Noto Serif",
+  "type": "registry:font",
+  "font": {
+    "family": "'Noto Serif Variable', serif",
+    "provider": "google",
+    "import": "Noto_Serif",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/noto-serif"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-nunito-sans.json b/apps/v4/public/r/styles/radix-sera/font-nunito-sans.json
new file mode 100644
index 0000000000..fae127aedd
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-nunito-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-nunito-sans",
+  "title": "Nunito Sans",
+  "type": "registry:font",
+  "font": {
+    "family": "'Nunito Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "Nunito_Sans",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/nunito-sans"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-outfit.json b/apps/v4/public/r/styles/radix-sera/font-outfit.json
new file mode 100644
index 0000000000..59f7b0627f
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-outfit.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-outfit",
+  "title": "Outfit",
+  "type": "registry:font",
+  "font": {
+    "family": "'Outfit Variable', sans-serif",
+    "provider": "google",
+    "import": "Outfit",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/outfit"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-oxanium.json b/apps/v4/public/r/styles/radix-sera/font-oxanium.json
new file mode 100644
index 0000000000..384c5d4206
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-oxanium.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-oxanium",
+  "title": "Oxanium",
+  "type": "registry:font",
+  "font": {
+    "family": "'Oxanium Variable', sans-serif",
+    "provider": "google",
+    "import": "Oxanium",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/oxanium"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-playfair-display.json b/apps/v4/public/r/styles/radix-sera/font-playfair-display.json
new file mode 100644
index 0000000000..efaae28a82
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-playfair-display.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-playfair-display",
+  "title": "Playfair Display",
+  "type": "registry:font",
+  "font": {
+    "family": "'Playfair Display Variable', serif",
+    "provider": "google",
+    "import": "Playfair_Display",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/playfair-display"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-public-sans.json b/apps/v4/public/r/styles/radix-sera/font-public-sans.json
new file mode 100644
index 0000000000..dfc5b3ba8f
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-public-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-public-sans",
+  "title": "Public Sans",
+  "type": "registry:font",
+  "font": {
+    "family": "'Public Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "Public_Sans",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/public-sans"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-raleway.json b/apps/v4/public/r/styles/radix-sera/font-raleway.json
new file mode 100644
index 0000000000..fe820638d9
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-raleway.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-raleway",
+  "title": "Raleway",
+  "type": "registry:font",
+  "font": {
+    "family": "'Raleway Variable', sans-serif",
+    "provider": "google",
+    "import": "Raleway",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/raleway"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-roboto-slab.json b/apps/v4/public/r/styles/radix-sera/font-roboto-slab.json
new file mode 100644
index 0000000000..d18a6247ee
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-roboto-slab.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-roboto-slab",
+  "title": "Roboto Slab",
+  "type": "registry:font",
+  "font": {
+    "family": "'Roboto Slab Variable', serif",
+    "provider": "google",
+    "import": "Roboto_Slab",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/roboto-slab"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-roboto.json b/apps/v4/public/r/styles/radix-sera/font-roboto.json
new file mode 100644
index 0000000000..6b9f7765ef
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-roboto.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-roboto",
+  "title": "Roboto",
+  "type": "registry:font",
+  "font": {
+    "family": "'Roboto Variable', sans-serif",
+    "provider": "google",
+    "import": "Roboto",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/roboto"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-source-sans-3.json b/apps/v4/public/r/styles/radix-sera/font-source-sans-3.json
new file mode 100644
index 0000000000..0684a20da4
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-source-sans-3.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-source-sans-3",
+  "title": "Source Sans 3",
+  "type": "registry:font",
+  "font": {
+    "family": "'Source Sans 3 Variable', sans-serif",
+    "provider": "google",
+    "import": "Source_Sans_3",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/source-sans-3"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/font-space-grotesk.json b/apps/v4/public/r/styles/radix-sera/font-space-grotesk.json
new file mode 100644
index 0000000000..d77d6dccc3
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/font-space-grotesk.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-space-grotesk",
+  "title": "Space Grotesk",
+  "type": "registry:font",
+  "font": {
+    "family": "'Space Grotesk Variable', sans-serif",
+    "provider": "google",
+    "import": "Space_Grotesk",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/space-grotesk"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/form.json b/apps/v4/public/r/styles/radix-sera/form.json
new file mode 100644
index 0000000000..29dda515fb
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/form.json
@@ -0,0 +1,5 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "form",
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/hover-card-example.json b/apps/v4/public/r/styles/radix-sera/hover-card-example.json
new file mode 100644
index 0000000000..c7ef4e3cef
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/hover-card-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hover-card-example",
+  "title": "Hover Card",
+  "registryDependencies": [
+    "button",
+    "dialog",
+    "hover-card",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/hover-card-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-sera/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/radix-sera/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side} openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent side={side} className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2 style-sera:gap-2\">\n                <h4 className=\"font-medium style-sera:font-heading style-sera:font-semibold style-sera:tracking-wide\">\n                  Hover Card\n                </h4>\n                <p className=\"style-sera:leading-relaxed\">\n                  This hover card appears on the {side} side of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Hover me\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2 style-sera:gap-2\">\n                <h4 className=\"font-medium style-sera:font-heading style-sera:font-semibold style-sera:tracking-wide\">\n                  Hover Card\n                </h4>\n                <p className=\"style-sera:leading-relaxed\">\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/hover-card.json b/apps/v4/public/r/styles/radix-sera/hover-card.json
new file mode 100644
index 0000000000..8f5d4fb7b6
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/hover-card.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hover-card",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/hover-card.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { HoverCard as HoverCardPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction HoverCard({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return (\n    <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-72 origin-(--radix-hover-card-content-transform-origin) bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/hover-card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/hover-card-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/hover-card.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/index.json b/apps/v4/public/r/styles/radix-sera/index.json
new file mode 100644
index 0000000000..69f13cef90
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/index.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "index",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "radix-ui"
+  ],
+  "devDependencies": [
+    "tw-animate-css",
+    "shadcn"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {},
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@import \"shadcn/tailwind.css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  },
+  "type": "registry:style"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/input-example.json b/apps/v4/public/r/styles/radix-sera/input-example.json
new file mode 100644
index 0000000000..3bac2d53af
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/input-example.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-example",
+  "title": "Input",
+  "registryDependencies": [
+    "button",
+    "field",
+    "input",
+    "native-select",
+    "select",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/input-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-sera/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-sera/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"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/input-group-example.json b/apps/v4/public/r/styles/radix-sera/input-group-example.json
new file mode 100644
index 0000000000..ae99f83a77
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/input-group-example.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-group-example",
+  "title": "Input Group",
+  "registryDependencies": [
+    "button",
+    "button-group",
+    "card",
+    "dropdown-menu",
+    "field",
+    "input",
+    "input-group",
+    "kbd",
+    "popover",
+    "spinner",
+    "textarea",
+    "tooltip",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/input-group-example.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/radix-sera/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-sera/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/radix-sera/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/radix-sera/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/radix-sera/ui/popover\"\nimport { Spinner } from \"@/registry/radix-sera/ui/spinner\"\nimport { Textarea } from \"@/registry/radix-sera/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-sera/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n                remixicon=\"RiEyeOffLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                remixicon=\"RiMicLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n                remixicon=\"RiStarLine\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <InputGroupButton className=\"rounded-full\" 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>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <InputGroupButton className=\"text-muted-foreground tabular-nums\">\n                    {country}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDownIcon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </InputGroupButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"pl-1 text-muted-foreground\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n                remixicon=\"RiSparklingLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                    remixicon=\"RiMailLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                    remixicon=\"RiExternalLinkLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                  remixicon=\"RiRefreshLine\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/input-group.json b/apps/v4/public/r/styles/radix-sera/input-group.json
new file mode 100644
index 0000000000..b0442de02c
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/input-group.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-group",
+  "registryDependencies": [
+    "button",
+    "input",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/input-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport { Textarea } from \"@/registry/radix-sera/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-10 w-full min-w-0 items-center rounded-none border border-transparent border-b-input bg-transparent transition-[color,border-color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-none has-data-[align=block-start]:rounded-none has-[[data-slot=input-group-control]:focus-visible]:border-b-ring has-[[data-slot][aria-invalid=true]]:border-b-destructive has-[textarea]:rounded-none has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:border-b-destructive/50 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-none **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"order-first\",\n        \"inline-end\": \"order-last\",\n        \"block-start\":\n          \"order-first w-full justify-start pt-3 group-has-[>input]/input-group:pt-3.5 [.border-b]:pb-3.5\",\n        \"block-end\":\n          \"order-last w-full justify-start pb-3 group-has-[>input]/input-group:pb-3.5 [.border-t]:pt-3.5\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"flex items-center gap-2 rounded-none text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-none px-1.5 text-xs [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 text-xs has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 border-0 bg-transparent ring-0 group-has-[>[data-align=inline-end]]/input-group:pr-2 group-has-[>[data-align=inline-start]]/input-group:pl-2 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none border-0 bg-transparent py-2.5 ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/input-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-group-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/input-otp-example.json b/apps/v4/public/r/styles/radix-sera/input-otp-example.json
new file mode 100644
index 0000000000..53f68e2c5e
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/input-otp-example.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp-example",
+  "title": "Input OTP",
+  "registryDependencies": [
+    "button",
+    "card",
+    "field",
+    "input-otp",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/input-otp-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-sera/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-sera/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-sera/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" 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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\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    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12 style-sera:*:data-[slot=input-otp-slot]:h-14 style-sera:*:data-[slot=input-otp-slot]:w-10\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12 style-sera:*:data-[slot=input-otp-slot]:h-14 style-sera:*:data-[slot=input-otp-slot]:w-10\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-sm text-muted-foreground\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"underline underline-offset-4 transition-colors hover:text-primary\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/input-otp.json b/apps/v4/public/r/styles/radix-sera/input-otp.json
new file mode 100644
index 0000000000..20e86668ae
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/input-otp.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-otp",
+  "dependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/input-otp.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\"disabled:cursor-not-allowed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\n        \"flex items-center gap-1 rounded-none has-aria-invalid:border-b-destructive dark:has-aria-invalid:border-b-destructive/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"relative flex size-10 items-center justify-center border border-transparent border-b-input bg-transparent text-sm transition-[color,border-color] outline-none first:rounded-none last:rounded-none aria-invalid:border-b-destructive data-[active=true]:z-10 data-[active=true]:border-b-ring dark:aria-invalid:border-b-destructive/50\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"flex items-center [&_svg:not([class*='size-'])]:size-4\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n        remixicon=\"RiSubtractLine\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/input-otp",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-otp-example.tsx",
+      "api": "https://input-otp.rodz.dev"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/input.json b/apps/v4/public/r/styles/radix-sera/input.json
new file mode 100644
index 0000000000..90073ec79c
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/input.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/input.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-10 w-full min-w-0 border border-transparent border-b-input bg-transparent px-0 py-1 text-base transition-[color,border-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-b-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive md:text-sm dark:aria-invalid:border-b-destructive/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/input",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/item-example.json b/apps/v4/public/r/styles/radix-sera/item-example.json
new file mode 100644
index 0000000000..5fa7c7a0f8
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/item-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "item-example",
+  "title": "Item",
+  "registryDependencies": [
+    "button",
+    "item",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/item-example.tsx",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/radix-sera/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/item.json b/apps/v4/public/r/styles/radix-sera/item.json
new file mode 100644
index 0000000000..0a93b1098f
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/item.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "item",
+  "registryDependencies": [
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/item.tsx",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"group/item flex w-full flex-wrap items-center rounded-none border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"border-transparent bg-muted/50\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-3.5 px-3.5 py-3\",\n        xs: \"gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof itemVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n  return (\n    <Comp\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(itemVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-none group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 group-data-[size=xs]/item:rounded-none [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0.5 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"cn-font-heading line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-semibold tracking-wide underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"line-clamp-2 text-left text-sm leading-relaxed font-normal text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/item",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/item-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/kbd-example.json b/apps/v4/public/r/styles/radix-sera/kbd-example.json
new file mode 100644
index 0000000000..fa8d99235a
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/kbd-example.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "kbd-example",
+  "title": "Kbd",
+  "registryDependencies": [
+    "button",
+    "input-group",
+    "kbd",
+    "tooltip",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/kbd-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-sera/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/radix-sera/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-sera/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n  return (\n    <ExampleWrapper>\n      <KbdBasic />\n      <KbdModifierKeys />\n      <KbdGroupExample />\n      <KbdArrowKeys />\n      <KbdWithIcons />\n      <KbdWithIconsAndText />\n      <KbdInInputGroup />\n      <KbdInTooltip />\n      <KbdWithSamp />\n    </ExampleWrapper>\n  )\n}\n\nfunction KbdBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>⌘K</Kbd>\n        <Kbd>Ctrl + B</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdModifierKeys() {\n  return (\n    <Example title=\"Modifier Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>⌘</Kbd>\n        <Kbd>C</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdGroupExample() {\n  return (\n    <Example title=\"KbdGroup\">\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdArrowKeys() {\n  return (\n    <Example title=\"Arrow Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>↑</Kbd>\n        <Kbd>↓</Kbd>\n        <Kbd>←</Kbd>\n        <Kbd>→</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n            remixicon=\"RiLoaderLine\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            remixicon=\"RiArrowLeftLine\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdWithIconsAndText() {\n  return (\n    <Example title=\"With Icons and Text\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            remixicon=\"RiArrowLeftLine\"\n          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n            remixicon=\"RiLoaderLine\"\n          />\n          Voice Enabled\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdInInputGroup() {\n  return (\n    <Example title=\"InputGroup\">\n      <InputGroup>\n        <InputGroupInput />\n        <InputGroupAddon>\n          <Kbd>Space</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n\nfunction KbdInTooltip() {\n  return (\n    <Example title=\"Tooltip\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button size=\"icon-sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction KbdWithSamp() {\n  return (\n    <Example title=\"With samp\">\n      <Kbd>\n        <samp>File</samp>\n      </Kbd>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/kbd.json b/apps/v4/public/r/styles/radix-sera/kbd.json
new file mode 100644
index 0000000000..53460e49dc
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/kbd.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "kbd",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/kbd.tsx",
+      "content": "import { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"pointer-events-none inline-flex h-5.5 w-fit min-w-5.5 items-center justify-center gap-1 rounded-none bg-muted px-1.5 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=input-group]:bg-input in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/kbd",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/kbd-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/label-example.json b/apps/v4/public/r/styles/radix-sera/label-example.json
new file mode 100644
index 0000000000..ea1bfaed5b
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/label-example.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "label-example",
+  "title": "Label",
+  "registryDependencies": [
+    "checkbox",
+    "field",
+    "input",
+    "label",
+    "textarea",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/label-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Checkbox } from \"@/registry/radix-sera/ui/checkbox\"\nimport { Field } from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport { Label } from \"@/registry/radix-sera/ui/label\"\nimport { Textarea } from \"@/registry/radix-sera/ui/textarea\"\n\nexport default function LabelExample() {\n  return (\n    <ExampleWrapper>\n      <LabelWithCheckbox />\n      <LabelWithInput />\n      <LabelDisabled />\n      <LabelWithTextarea />\n    </ExampleWrapper>\n  )\n}\n\nfunction LabelWithCheckbox() {\n  return (\n    <Example title=\"With Checkbox\">\n      <Field orientation=\"horizontal\">\n        <Checkbox id=\"label-demo-terms\" />\n        <Label htmlFor=\"label-demo-terms\">Accept terms and conditions</Label>\n      </Field>\n    </Example>\n  )\n}\n\nfunction LabelWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Field>\n        <Label htmlFor=\"label-demo-username\">Username</Label>\n        <Input id=\"label-demo-username\" placeholder=\"Username\" />\n      </Field>\n    </Example>\n  )\n}\n\nfunction LabelDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field data-disabled={true}>\n        <Label htmlFor=\"label-demo-disabled\">Disabled</Label>\n        <Input id=\"label-demo-disabled\" placeholder=\"Disabled\" disabled />\n      </Field>\n    </Example>\n  )\n}\n\nfunction LabelWithTextarea() {\n  return (\n    <Example title=\"With Textarea\">\n      <Field>\n        <Label htmlFor=\"label-demo-message\">Message</Label>\n        <Textarea id=\"label-demo-message\" placeholder=\"Message\" />\n      </Field>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/label.json b/apps/v4/public/r/styles/radix-sera/label.json
new file mode 100644
index 0000000000..829bf23cd3
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/label.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "label",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/label.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label as LabelPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction Label({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-xs leading-relaxed font-semibold tracking-wide uppercase select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[slot=checkbox]:text-sm peer-data-[slot=checkbox]:font-medium peer-data-[slot=checkbox]:tracking-normal peer-data-[slot=checkbox]:normal-case peer-data-[slot=radio]:text-sm peer-data-[slot=radio]:font-medium peer-data-[slot=radio]:tracking-normal peer-data-[slot=radio]:normal-case\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/label",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/label-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/label.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/login-01.json b/apps/v4/public/r/styles/radix-sera/login-01.json
new file mode 100644
index 0000000000..31e123c2e8
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/login-01.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-01",
+  "title": "Login 01",
+  "description": "A simple login form.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "field"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/login-01/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/radix-sera/blocks/login-01/components/login-form\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/login-01/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-sera/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card>\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Login with Google\n                </Button>\n                <FieldDescription className=\"text-center\">\n                  Don&apos;t have an account? <a href=\"#\">Sign up</a>\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/login-02.json b/apps/v4/public/r/styles/radix-sera/login-02.json
new file mode 100644
index 0000000000..e5f2e56a05
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/login-02.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-02",
+  "title": "Login 02",
+  "description": "A two column login page with a cover image.",
+  "registryDependencies": [
+    "button",
+    "input",
+    "label",
+    "field"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/login-02/page.tsx",
+      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/radix-sera/blocks/login-02/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/login-02/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator>Or continue with</FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/login-03.json b/apps/v4/public/r/styles/radix-sera/login-03.json
new file mode 100644
index 0000000000..7b81f9c68d
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/login-03.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-03",
+  "title": "Login 03",
+  "description": "A login page with a muted background color.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "field"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/login-03/page.tsx",
+      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/radix-sera/blocks/login-03/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/login-03/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-sera/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card>\n        <CardHeader className=\"text-center\">\n          <CardTitle className=\"text-xl\">Welcome back</CardTitle>\n          <CardDescription>\n            Login with your Apple or Google account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  Login with Apple\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  Login with Google\n                </Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n                <FieldDescription className=\"text-center\">\n                  Don&apos;t have an account? <a href=\"#\">Sign up</a>\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/login-04.json b/apps/v4/public/r/styles/radix-sera/login-04.json
new file mode 100644
index 0000000000..1d40cd6fe1
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/login-04.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-04",
+  "title": "Login 04",
+  "description": "A login page with form and image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "field"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/login-04/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/radix-sera/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/login-04/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-sera/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-balance text-muted-foreground\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Don&apos;t have an account? <a href=\"#\">Sign up</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/login-05.json b/apps/v4/public/r/styles/radix-sera/login-05.json
new file mode 100644
index 0000000000..31f337bbe6
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/login-05.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-05",
+  "title": "Login 05",
+  "description": "A simple email-only login page.",
+  "registryDependencies": [
+    "button",
+    "input",
+    "label",
+    "field"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/login-05/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/radix-sera/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/login/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/login-05/components/login-form.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <FieldGroup>\n          <div className=\"flex flex-col items-center gap-2 text-center\">\n            <a\n              href=\"#\"\n              className=\"flex flex-col items-center gap-2 font-medium\"\n            >\n              <div className=\"flex size-8 items-center justify-center rounded-md\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-6\"\n                />\n              </div>\n              <span className=\"sr-only\">Acme Inc.</span>\n            </a>\n            <h1 className=\"text-xl font-bold\">Welcome to Acme Inc.</h1>\n            <FieldDescription>\n              Don&apos;t have an account? <a href=\"#\">Sign up</a>\n            </FieldDescription>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </Field>\n          <Field>\n            <Button type=\"submit\">Login</Button>\n          </Field>\n          <FieldSeparator>Or</FieldSeparator>\n          <Field className=\"grid gap-4 sm:grid-cols-2\">\n            <Button variant=\"outline\" type=\"button\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              Continue with Apple\n            </Button>\n            <Button variant=\"outline\" type=\"button\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              Continue with Google\n            </Button>\n          </Field>\n        </FieldGroup>\n      </form>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "login"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/menubar-example.json b/apps/v4/public/r/styles/radix-sera/menubar-example.json
new file mode 100644
index 0000000000..afeda53969
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/menubar-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "menubar-example",
+  "title": "Menubar",
+  "registryDependencies": [
+    "button",
+    "dialog",
+    "menubar",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/menubar-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-sera/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarLabel,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/radix-sera/ui/menubar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function MenubarExample() {\n  return (\n    <ExampleWrapper>\n      <MenubarBasic />\n      <MenubarWithSubmenu />\n      <MenubarWithCheckboxes />\n      <MenubarWithRadio />\n      <MenubarWithIcons />\n      <MenubarWithShortcuts />\n      <MenubarFormat />\n      <MenubarInsert />\n      <MenubarDestructive />\n      <MenubarInDialog />\n      <MenubarWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction MenubarBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                New Window <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem disabled>New Incognito Window</MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>Cut</MenubarItem>\n              <MenubarItem>Copy</MenubarItem>\n              <MenubarItem>Paste</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>Share</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Email link</MenubarItem>\n                  <MenubarItem>Messages</MenubarItem>\n                  <MenubarItem>Notes</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger>Find</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Find...</MenubarItem>\n                  <MenubarItem>Find Next</MenubarItem>\n                  <MenubarItem>Find Previous</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>Cut</MenubarItem>\n              <MenubarItem>Copy</MenubarItem>\n              <MenubarItem>Paste</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-64\">\n            <MenubarGroup>\n              <MenubarCheckboxItem>\n                Always Show Bookmarks Bar\n              </MenubarCheckboxItem>\n              <MenubarCheckboxItem checked>\n                Always Show Full URLs\n              </MenubarCheckboxItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>\n                Reload <MenubarShortcut>⌘R</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem disabled inset>\n                Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithRadio() {\n  const [user, setUser] = React.useState(\"benoit\")\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Radio\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Profiles</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={user} onValueChange={setUser}>\n              <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n              <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n              <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            </MenubarRadioGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>Edit...</MenubarItem>\n              <MenubarItem inset>Add Profile...</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Theme</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n              <MenubarRadioItem value=\"light\">Light</MenubarRadioItem>\n              <MenubarRadioItem value=\"dark\">Dark</MenubarRadioItem>\n              <MenubarRadioItem value=\"system\">System</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FileIcon\"\n                  tabler=\"IconFile\"\n                  hugeicons=\"FileIcon\"\n                  phosphor=\"FileIcon\"\n                  remixicon=\"RiFileLine\"\n                />\n                New File <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Open Folder\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SaveIcon\"\n                  tabler=\"IconDeviceFloppy\"\n                  hugeicons=\"FloppyDiskIcon\"\n                  phosphor=\"FloppyDiskIcon\"\n                  remixicon=\"RiSaveLine\"\n                />\n                Save <MenubarShortcut>⌘S</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>More</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                  remixicon=\"RiLoaderLine\"\n                />\n                Settings\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                  remixicon=\"RiLoaderLine\"\n                />\n                Help\n              </MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                  remixicon=\"RiLoaderLine\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                New Window <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Cut <MenubarShortcut>⌘X</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Copy <MenubarShortcut>⌘C</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Paste <MenubarShortcut>⌘V</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarFormat() {\n  return (\n    <Example title=\"Format\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"BoldIcon\"\n                  tabler=\"IconBold\"\n                  hugeicons=\"TextBoldIcon\"\n                  phosphor=\"TextBIcon\"\n                  remixicon=\"RiBold\"\n                />\n                Bold <MenubarShortcut>⌘B</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"ItalicIcon\"\n                  tabler=\"IconItalic\"\n                  hugeicons=\"TextItalicIcon\"\n                  phosphor=\"TextItalicIcon\"\n                  remixicon=\"RiItalic\"\n                />\n                Italic <MenubarShortcut>⌘I</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"UnderlineIcon\"\n                  tabler=\"IconUnderline\"\n                  hugeicons=\"TextUnderlineIcon\"\n                  phosphor=\"TextUnderlineIcon\"\n                  remixicon=\"RiUnderline\"\n                />\n                Underline <MenubarShortcut>⌘U</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n              <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>Zoom In</MenubarItem>\n              <MenubarItem inset>Zoom Out</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInsert() {\n  return (\n    <Example title=\"Insert\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Insert</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                  phosphor=\"ImageIcon\"\n                  remixicon=\"RiImageLine\"\n                />\n                Media\n              </MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Image</MenubarItem>\n                  <MenubarItem>Video</MenubarItem>\n                  <MenubarItem>Audio</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"LinkIcon\"\n                  tabler=\"IconLink\"\n                  hugeicons=\"LinkIcon\"\n                  phosphor=\"LinkIcon\"\n                  remixicon=\"RiLinksLine\"\n                />\n                Link <MenubarShortcut>⌘K</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"TableIcon\"\n                  tabler=\"IconTable\"\n                  hugeicons=\"TableIcon\"\n                  phosphor=\"TableIcon\"\n                  remixicon=\"RiTableLine\"\n                />\n                Table\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Tools</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                />\n                Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                />\n                Spell Check\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarDestructive() {\n  return (\n    <Example title=\"Destructive\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent className=\"w-40\">\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FileIcon\"\n                  tabler=\"IconFile\"\n                  hugeicons=\"FileIcon\"\n                  phosphor=\"FileIcon\"\n                  remixicon=\"RiFileLine\"\n                />\n                New File <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Open Folder\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Account</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Profile\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                  phosphor=\"SignOutIcon\"\n                  remixicon=\"RiLogoutBoxLine\"\n                />\n                Sign out\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Menubar Example</DialogTitle>\n            <DialogDescription>\n              Use the menubar below to see the menu options.\n            </DialogDescription>\n          </DialogHeader>\n          <Menubar>\n            <MenubarMenu>\n              <MenubarTrigger>File</MenubarTrigger>\n              <MenubarContent>\n                <MenubarGroup>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"CopyIcon\"\n                      tabler=\"IconCopy\"\n                      hugeicons=\"CopyIcon\"\n                      phosphor=\"CopyIcon\"\n                      remixicon=\"RiFileCopyLine\"\n                    />\n                    Copy\n                  </MenubarItem>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"ScissorsIcon\"\n                      tabler=\"IconCut\"\n                      hugeicons=\"ScissorIcon\"\n                      phosphor=\"ScissorsIcon\"\n                      remixicon=\"RiScissorsLine\"\n                    />\n                    Cut\n                  </MenubarItem>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"ClipboardPasteIcon\"\n                      tabler=\"IconClipboard\"\n                      hugeicons=\"ClipboardIcon\"\n                      phosphor=\"ClipboardIcon\"\n                      remixicon=\"RiClipboardLine\"\n                    />\n                    Paste\n                  </MenubarItem>\n                </MenubarGroup>\n                <MenubarSeparator />\n                <MenubarSub>\n                  <MenubarSubTrigger>More Options</MenubarSubTrigger>\n                  <MenubarSubContent>\n                    <MenubarGroup>\n                      <MenubarItem>Save Page...</MenubarItem>\n                      <MenubarItem>Create Shortcut...</MenubarItem>\n                      <MenubarItem>Name Window...</MenubarItem>\n                    </MenubarGroup>\n                    <MenubarSeparator />\n                    <MenubarGroup>\n                      <MenubarItem>Developer Tools</MenubarItem>\n                    </MenubarGroup>\n                  </MenubarSubContent>\n                </MenubarSub>\n                <MenubarSeparator />\n                <MenubarGroup>\n                  <MenubarItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"TrashIcon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"DeleteIcon\"\n                      phosphor=\"TrashIcon\"\n                      remixicon=\"RiDeleteBinLine\"\n                    />\n                    Delete\n                  </MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n            <MenubarMenu>\n              <MenubarTrigger>Edit</MenubarTrigger>\n              <MenubarContent>\n                <MenubarGroup>\n                  <MenubarItem>\n                    Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n                  </MenubarItem>\n                  <MenubarItem>\n                    Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n                  </MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction MenubarWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarGroup>\n              <MenubarLabel>Actions</MenubarLabel>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </MenubarItem>\n              <MenubarItem inset>Paste</MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarLabel inset>Appearance</MenubarLabel>\n              <MenubarCheckboxItem\n                inset\n                checked={showBookmarks}\n                onCheckedChange={setShowBookmarks}\n              >\n                Bookmarks\n              </MenubarCheckboxItem>\n              <MenubarCheckboxItem\n                inset\n                checked={showUrls}\n                onCheckedChange={setShowUrls}\n              >\n                Full URLs\n              </MenubarCheckboxItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarLabel inset>Theme</MenubarLabel>\n              <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n                <MenubarRadioItem inset value=\"light\">\n                  Light\n                </MenubarRadioItem>\n                <MenubarRadioItem inset value=\"dark\">\n                  Dark\n                </MenubarRadioItem>\n                <MenubarRadioItem inset value=\"system\">\n                  System\n                </MenubarRadioItem>\n              </MenubarRadioGroup>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger inset>More Options</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Save Page...</MenubarItem>\n                  <MenubarItem>Create Shortcut...</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/menubar.json b/apps/v4/public/r/styles/radix-sera/menubar.json
new file mode 100644
index 0000000000..4daa069357
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/menubar.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "menubar",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/menubar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-10 items-center rounded-none border p-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return (\n    <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />\n  )\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"flex items-center rounded-none px-2 py-0.75 text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"cn-menu-target cn-menu-translucent z-50 min-w-48 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/menubar-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-3 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-3 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-3.5 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase data-inset:pl-9.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        className=\"cn-rtl-flip ml-auto size-4\"\n      />\n    </MenubarPrimitive.SubTrigger>\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"cn-menu-target cn-menu-translucent z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/menubar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/menubar-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/menubar.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/native-select-example.json b/apps/v4/public/r/styles/radix-sera/native-select-example.json
new file mode 100644
index 0000000000..9aa882389e
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/native-select-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "native-select-example",
+  "title": "Native Select",
+  "registryDependencies": [
+    "field",
+    "native-select",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/native-select-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/radix-sera/ui/field\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-sera/ui/native-select\"\n\nexport default function NativeSelectExample() {\n  return (\n    <ExampleWrapper>\n      <NativeSelectBasic />\n      <NativeSelectWithGroups />\n      <NativeSelectSizes />\n      <NativeSelectWithField />\n      <NativeSelectDisabled />\n      <NativeSelectInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction NativeSelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <NativeSelect>\n        <NativeSelectOption value=\"\">Select a fruit</NativeSelectOption>\n        <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n        <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n        <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n        <NativeSelectOption value=\"grapes\" disabled>\n          Grapes\n        </NativeSelectOption>\n        <NativeSelectOption value=\"pineapple\">Pineapple</NativeSelectOption>\n      </NativeSelect>\n    </Example>\n  )\n}\n\nfunction NativeSelectWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <NativeSelect>\n        <NativeSelectOption value=\"\">Select a food</NativeSelectOption>\n        <NativeSelectOptGroup label=\"Fruits\">\n          <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n          <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n          <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n        </NativeSelectOptGroup>\n        <NativeSelectOptGroup label=\"Vegetables\">\n          <NativeSelectOption value=\"carrot\">Carrot</NativeSelectOption>\n          <NativeSelectOption value=\"broccoli\">Broccoli</NativeSelectOption>\n          <NativeSelectOption value=\"spinach\">Spinach</NativeSelectOption>\n        </NativeSelectOptGroup>\n      </NativeSelect>\n    </Example>\n  )\n}\n\nfunction NativeSelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <NativeSelect size=\"sm\">\n          <NativeSelectOption value=\"\">Select a fruit</NativeSelectOption>\n          <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n          <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n          <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n        </NativeSelect>\n        <NativeSelect size=\"default\">\n          <NativeSelectOption value=\"\">Select a fruit</NativeSelectOption>\n          <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n          <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n          <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction NativeSelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n        <NativeSelect id=\"native-select-country\">\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          <NativeSelectOption value=\"au\">Australia</NativeSelectOption>\n        </NativeSelect>\n        <FieldDescription>Select your country of residence.</FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction NativeSelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <NativeSelect disabled>\n        <NativeSelectOption value=\"\">Disabled</NativeSelectOption>\n        <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n        <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n        <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n      </NativeSelect>\n    </Example>\n  )\n}\n\nfunction NativeSelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <NativeSelect aria-invalid=\"true\">\n        <NativeSelectOption value=\"\">Error state</NativeSelectOption>\n        <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n        <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n        <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n      </NativeSelect>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/native-select.json b/apps/v4/public/r/styles/radix-sera/native-select.json
new file mode 100644
index 0000000000..b4d21f7136
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/native-select.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "native-select",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/native-select.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"h-10 w-full min-w-0 appearance-none rounded-none border border-transparent border-b-input bg-transparent py-2 pr-8 pl-0 text-sm transition-[color,border-color] outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-b-ring disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-b-destructive data-[size=sm]:h-9 dark:aria-invalid:border-b-destructive/50\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"pointer-events-none absolute top-1/2 right-0 size-4 -translate-y-1/2 text-muted-foreground select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({\n  className,\n  ...props\n}: React.ComponentProps<\"option\">) {\n  return (\n    <option\n      data-slot=\"native-select-option\"\n      className={cn(\"bg-[Canvas] text-[CanvasText]\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(\"bg-[Canvas] text-[CanvasText]\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/native-select",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/native-select-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/navigation-menu-example.json b/apps/v4/public/r/styles/radix-sera/navigation-menu-example.json
new file mode 100644
index 0000000000..c590e46f72
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/navigation-menu-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "navigation-menu-example",
+  "title": "Navigation Menu",
+  "registryDependencies": [
+    "button",
+    "dialog",
+    "navigation-menu",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/navigation-menu-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/radix-sera/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n                          Components\n                        </div>\n                        <div className=\"text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n                          Documentation\n                        </div>\n                        <div className=\"text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n                          Blog\n                        </div>\n                        <div className=\"text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n            <div className=\"leading-none font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n              {title}\n            </div>\n            <div className=\"line-clamp-2 text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n              {children}\n            </div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/navigation-menu.json b/apps/v4/public/r/styles/radix-sera/navigation-menu.json
new file mode 100644
index 0000000000..7b434a1274
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/navigation-menu.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "navigation-menu",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/navigation-menu.tsx",
+      "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"group flex flex-1 list-none items-center justify-center gap-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-none px-4.5 py-2.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"top-0 left-0 w-full p-2.5 pr-3 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow-md group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 md:w-(--radix-navigation-menu-viewport-width) data-open:animate-in data-open:zoom-in-90 data-closed:animate-out data-closed:zoom-out-90\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"flex items-center gap-1.5 rounded-none p-3 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none data-[active=true]:bg-muted/50 data-[active=true]:hover:bg-muted data-[active=true]:focus:bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-none bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/navigation-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/navigation-menu.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/pagination-example.json b/apps/v4/public/r/styles/radix-sera/pagination-example.json
new file mode 100644
index 0000000000..f6dac49c9f
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/pagination-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "pagination-example",
+  "title": "Pagination",
+  "registryDependencies": [
+    "field",
+    "pagination",
+    "select",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/pagination-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Field, FieldLabel } from \"@/registry/radix-sera/ui/field\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/radix-sera/ui/pagination\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-sera/ui/select\"\n\nexport default function PaginationExample() {\n  return (\n    <ExampleWrapper>\n      <PaginationBasic />\n      <PaginationSimple />\n      <PaginationIconsOnly />\n    </ExampleWrapper>\n  )\n}\n\nfunction PaginationBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Pagination>\n        <PaginationContent>\n          <PaginationItem>\n            <PaginationPrevious href=\"#\" />\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">1</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\" isActive>\n              2\n            </PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">3</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationEllipsis />\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationNext href=\"#\" />\n          </PaginationItem>\n        </PaginationContent>\n      </Pagination>\n    </Example>\n  )\n}\n\nfunction PaginationSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Pagination>\n        <PaginationContent>\n          <PaginationItem>\n            <PaginationLink href=\"#\">1</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\" isActive>\n              2\n            </PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">3</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">4</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">5</PaginationLink>\n          </PaginationItem>\n        </PaginationContent>\n      </Pagination>\n    </Example>\n  )\n}\n\nfunction PaginationIconsOnly() {\n  return (\n    <Example title=\"With Select\" containerClassName=\"col-span-2\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <Field orientation=\"horizontal\" className=\"w-fit\">\n          <FieldLabel htmlFor=\"select-rows-per-page\">Rows per page</FieldLabel>\n          <Select defaultValue=\"25\">\n            <SelectTrigger className=\"w-20\" id=\"select-rows-per-page\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectGroup>\n                <SelectItem value=\"10\">10</SelectItem>\n                <SelectItem value=\"25\">25</SelectItem>\n                <SelectItem value=\"50\">50</SelectItem>\n                <SelectItem value=\"100\">100</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Pagination className=\"mx-0 w-auto\">\n          <PaginationContent>\n            <PaginationItem>\n              <PaginationPrevious href=\"#\" />\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationNext href=\"#\" />\n            </PaginationItem>\n          </PaginationContent>\n        </Pagination>\n      </div>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/pagination.json b/apps/v4/public/r/styles/radix-sera/pagination.json
new file mode 100644
index 0000000000..e42fbc2726
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/pagination.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "pagination",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/pagination.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <Button\n      asChild\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(className)}\n    >\n      <a\n        aria-current={isActive ? \"page\" : undefined}\n        data-slot=\"pagination-link\"\n        data-active={isActive}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  text = \"Previous\",\n  ...props\n}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-2!\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n        remixicon=\"RiArrowLeftSLine\"\n        data-icon=\"inline-start\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"hidden sm:block\">{text}</span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  text = \"Next\",\n  ...props\n}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-2!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">{text}</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        data-icon=\"inline-end\"\n        className=\"cn-rtl-flip\"\n      />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"flex size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n        remixicon=\"RiMoreLine\"\n      />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/pagination",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/pagination-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/popover-example.json b/apps/v4/public/r/styles/radix-sera/popover-example.json
new file mode 100644
index 0000000000..672336cbab
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/popover-example.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "popover-example",
+  "title": "Popover",
+  "registryDependencies": [
+    "button",
+    "dialog",
+    "field",
+    "input",
+    "popover",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/popover-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-sera/ui/dialog\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/radix-sera/ui/popover\"\n\nexport default function PopoverExample() {\n  return (\n    <ExampleWrapper>\n      <PopoverBasic />\n      <PopoverWithForm />\n      <PopoverAlignments />\n      <PopoverInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction PopoverBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\">Open Popover</Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\">\n          <PopoverHeader>\n            <PopoverTitle>Dimensions</PopoverTitle>\n            <PopoverDescription>\n              Set the dimensions for the layer.\n            </PopoverDescription>\n          </PopoverHeader>\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction PopoverWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\">Open Popover</Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-64\" align=\"start\">\n          <PopoverHeader>\n            <PopoverTitle>Dimensions</PopoverTitle>\n            <PopoverDescription>\n              Set the dimensions for the layer.\n            </PopoverDescription>\n          </PopoverHeader>\n          <FieldGroup className=\"gap-4\">\n            <Field orientation=\"horizontal\">\n              <FieldLabel htmlFor=\"width\" className=\"w-1/2\">\n                Width\n              </FieldLabel>\n              <Input id=\"width\" defaultValue=\"100%\" />\n            </Field>\n            <Field orientation=\"horizontal\">\n              <FieldLabel htmlFor=\"height\" className=\"w-1/2\">\n                Height\n              </FieldLabel>\n              <Input id=\"height\" defaultValue=\"25px\" />\n            </Field>\n          </FieldGroup>\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction PopoverAlignments() {\n  return (\n    <Example title=\"Alignments\">\n      <div className=\"flex gap-6\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" size=\"sm\">\n              Start\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent align=\"start\" className=\"w-40\">\n            Aligned to start\n          </PopoverContent>\n        </Popover>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" size=\"sm\">\n              Center\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent align=\"center\" className=\"w-40\">\n            Aligned to center\n          </PopoverContent>\n        </Popover>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" size=\"sm\">\n              End\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent align=\"end\" className=\"w-40\">\n            Aligned to end\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction PopoverInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Popover Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the popover.\n            </DialogDescription>\n          </DialogHeader>\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Popover\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\">\n              <PopoverHeader>\n                <PopoverTitle>Popover in Dialog</PopoverTitle>\n                <PopoverDescription>\n                  This popover appears inside a dialog. Click the button to open\n                  it.\n                </PopoverDescription>\n              </PopoverHeader>\n            </PopoverContent>\n          </Popover>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/popover.json b/apps/v4/public/r/styles/radix-sera/popover.json
new file mode 100644
index 0000000000..b753c12441
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/popover.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "popover",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/popover.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-none bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-1 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <div\n      data-slot=\"popover-title\"\n      className={cn(\n        \"cn-font-heading text-sm font-semibold tracking-wide\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"popover-description\"\n      className={cn(\n        \"mt-0.5 text-sm leading-relaxed text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/popover",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/popover-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/popover.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/preview-02.json b/apps/v4/public/r/styles/radix-sera/preview-02.json
new file mode 100644
index 0000000000..f73dffa018
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/preview-02.json
@@ -0,0 +1,48 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "preview-02",
+  "title": "Preview 02",
+  "dependencies": [
+    "react-qr-code"
+  ],
+  "registryDependencies": [
+    "accordion",
+    "badge",
+    "breadcrumb",
+    "button",
+    "calendar",
+    "card",
+    "chart",
+    "checkbox",
+    "combobox",
+    "dropdown-menu",
+    "empty",
+    "field",
+    "input",
+    "input-group",
+    "item",
+    "label",
+    "native-select",
+    "progress",
+    "radio-group",
+    "select",
+    "separator",
+    "sidebar",
+    "skeleton",
+    "slider",
+    "spinner",
+    "switch",
+    "table",
+    "tabs",
+    "textarea",
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/preview-02/index.tsx",
+      "content": "import { AccountAccess } from \"@/registry/radix-sera/blocks/preview-02/cards/account-access\"\nimport { CardOverview } from \"@/registry/radix-sera/blocks/preview-02/cards/card-overview\"\nimport { ClaimableBalance } from \"@/registry/radix-sera/blocks/preview-02/cards/claimable-balance\"\nimport { ContributionHistory } from \"@/registry/radix-sera/blocks/preview-02/cards/contribution-history\"\nimport { CoverArt } from \"@/registry/radix-sera/blocks/preview-02/cards/cover-art\"\nimport { DividendIncome } from \"@/registry/radix-sera/blocks/preview-02/cards/dividend-income\"\nimport { EmptyConnectBank } from \"@/registry/radix-sera/blocks/preview-02/cards/empty-connect-bank\"\nimport { EmptyDistributeTrack } from \"@/registry/radix-sera/blocks/preview-02/cards/empty-distribute-track\"\nimport { EmptyExploreCatalog } from \"@/registry/radix-sera/blocks/preview-02/cards/empty-explore-catalog\"\nimport { Faq } from \"@/registry/radix-sera/blocks/preview-02/cards/faq\"\nimport { FrontDoor } from \"@/registry/radix-sera/blocks/preview-02/cards/front-door\"\nimport { IndexInvesting } from \"@/registry/radix-sera/blocks/preview-02/cards/index-investing\"\nimport { KitchenIsland } from \"@/registry/radix-sera/blocks/preview-02/cards/kitchen-island\"\nimport { LoadingCard } from \"@/registry/radix-sera/blocks/preview-02/cards/loading-card\"\nimport { NewMilestone } from \"@/registry/radix-sera/blocks/preview-02/cards/new-milestone\"\nimport { NotificationSettings } from \"@/registry/radix-sera/blocks/preview-02/cards/notification-settings\"\nimport { Payments } from \"@/registry/radix-sera/blocks/preview-02/cards/payments\"\nimport { PayoutThreshold } from \"@/registry/radix-sera/blocks/preview-02/cards/payout-threshold\"\nimport { PowerUsage } from \"@/registry/radix-sera/blocks/preview-02/cards/power-usage\"\nimport { Preferences } from \"@/registry/radix-sera/blocks/preview-02/cards/preferences\"\nimport { QrConnect } from \"@/registry/radix-sera/blocks/preview-02/cards/qr-connect\"\nimport { ReceivingMethod } from \"@/registry/radix-sera/blocks/preview-02/cards/receiving-method\"\nimport { RecentTransactions } from \"@/registry/radix-sera/blocks/preview-02/cards/recent-transactions\"\nimport { ReleaseCatalog } from \"@/registry/radix-sera/blocks/preview-02/cards/release-catalog\"\nimport { RollerShades } from \"@/registry/radix-sera/blocks/preview-02/cards/roller-shades\"\nimport { SavingsProgress } from \"@/registry/radix-sera/blocks/preview-02/cards/savings-progress\"\nimport { SavingsTargets } from \"@/registry/radix-sera/blocks/preview-02/cards/savings-targets\"\nimport { SidebarNav } from \"@/registry/radix-sera/blocks/preview-02/cards/sidebar-nav\"\nimport { SocialLinks } from \"@/registry/radix-sera/blocks/preview-02/cards/social-links\"\nimport { StockPerformance } from \"@/registry/radix-sera/blocks/preview-02/cards/stock-performance\"\nimport { SyncingState } from \"@/registry/radix-sera/blocks/preview-02/cards/syncing-state\"\nimport { TransferFunds } from \"@/registry/radix-sera/blocks/preview-02/cards/transfer-funds\"\nimport { UpcomingPayments } from \"@/registry/radix-sera/blocks/preview-02/cards/upcoming-payments\"\n\nexport default function Preview02Example() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden bg-muted contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)] dark:bg-background style-lyra:md:[--gap:--spacing(6)] style-mira:md:[--gap:--spacing(6)]\">\n      <div className=\"flex w-full min-w-max justify-center\">\n        <div\n          className=\"grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background style-lyra:md:w-[2600px] style-mira:md:w-[2600px] *:[div]:gap-(--gap)\"\n          data-slot=\"capture-target\"\n        >\n          <div className=\"flex flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n            <ContributionHistory />\n            <EmptyDistributeTrack />\n            <QrConnect />\n            <DividendIncome />\n            <IndexInvesting />\n            <SyncingState />\n          </div>\n          <div className=\"flex flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n            <PayoutThreshold />\n            <ClaimableBalance />\n            <Preferences />\n            <SavingsProgress />\n            <KitchenIsland />\n          </div>\n          <div className=\"col-span-2 flex flex-col p-1 [contain-intrinsic-size:760px_1200px] [content-visibility:auto]\">\n            <SavingsTargets />\n            <RecentTransactions />\n            <div className=\"grid grid-cols-2 items-start gap-(--gap)\">\n              <div className=\"flex flex-col gap-(--gap)\">\n                <SidebarNav />\n                <Faq />\n              </div>\n              <div className=\"flex flex-col gap-(--gap)\">\n                <Payments />\n                <FrontDoor />\n              </div>\n            </div>\n            <ReleaseCatalog />\n          </div>\n          <div className=\"flex flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n            <AccountAccess />\n            <CardOverview />\n            <TransferFunds />\n            <CoverArt />\n            <LoadingCard />\n          </div>\n          <div className=\"flex flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n            <ReceivingMethod />\n            <PowerUsage />\n            <EmptyConnectBank />\n            <UpcomingPayments />\n            <RollerShades />\n          </div>\n          <div className=\"flex flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n            <StockPerformance />\n            <EmptyExploreCatalog />\n            <NewMilestone />\n            <SocialLinks />\n            <NotificationSettings />\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/preview.json b/apps/v4/public/r/styles/radix-sera/preview.json
new file mode 100644
index 0000000000..84368765d4
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/preview.json
@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "preview",
+  "title": "Preview",
+  "registryDependencies": [
+    "alert-dialog",
+    "avatar",
+    "badge",
+    "button",
+    "button-group",
+    "card",
+    "checkbox",
+    "combobox",
+    "dropdown-menu",
+    "empty",
+    "field",
+    "input",
+    "input-group",
+    "item",
+    "label",
+    "popover",
+    "radio-group",
+    "select",
+    "separator",
+    "sheet",
+    "slider",
+    "spinner",
+    "switch",
+    "textarea",
+    "tooltip",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/preview/index.tsx",
+      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/radix-sera/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/radix-sera/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/radix-sera/blocks/preview/cards/anomaly-alert\"\nimport { BarChartCard } from \"@/registry/radix-sera/blocks/preview/cards/bar-chart-card\"\nimport { BookAppointment } from \"@/registry/radix-sera/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/radix-sera/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/radix-sera/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/radix-sera/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/radix-sera/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/radix-sera/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/radix-sera/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/radix-sera/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/radix-sera/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/radix-sera/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/radix-sera/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/radix-sera/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/radix-sera/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/radix-sera/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/radix-sera/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/radix-sera/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/radix-sera/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/radix-sera/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/radix-sera/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/radix-sera/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/radix-sera/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/radix-sera/blocks/preview/cards/style-overview\"\nimport { TypographySpecimen } from \"@/registry/radix-sera/blocks/preview/cards/typography-specimen\"\nimport { UIElements } from \"@/registry/radix-sera/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/radix-sera/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/radix-sera/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/radix-sera/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden bg-muted contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)] dark:bg-background style-lyra:md:[--gap:--spacing(6)] style-mira:md:[--gap:--spacing(6)]\">\n      <div className=\"flex w-full min-w-max justify-center\">\n        <div\n          className=\"grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background style-lyra:md:w-[2600px] style-mira:md:w-[2600px] *:[div]:gap-(--gap)\"\n          data-slot=\"capture-target\"\n        >\n          <div className=\"flex flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n            <StyleOverview />\n            <TypographySpecimen />\n            <div className=\"md:hidden\">\n              <UIElements />\n            </div>\n            <CodespacesCard />\n            <Invoice />\n          </div>\n          <div className=\"flex flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n            <IconPreviewGrid />\n            <div className=\"hidden w-full md:flex\">\n              <UIElements />\n            </div>\n            <ObservabilityCard />\n            <ShippingAddress />\n          </div>\n          <div className=\"flex flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n            <EnvironmentVariables />\n            <BarChartCard />\n            <InviteTeam />\n            <ActivateAgentDialog />\n          </div>\n          <div className=\"flex flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n            <SkeletonLoading />\n            <PieChartCard />\n            <NoTeamMembers />\n            <ReportBug />\n            <Contributors />\n          </div>\n          <div className=\"flex flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n            <FeedbackForm />\n            <BookAppointment />\n            <SleepReport />\n            <GithubProfile />\n          </div>\n          <div className=\"flex flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n            <WeeklyFitnessSummary />\n            <FileUpload />\n            <AnalyticsCard />\n            <UsageCard />\n            <Shortcuts />\n          </div>\n          <div className=\"flex flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n            <AnomalyAlert />\n            <LiveWaveformCard />\n            <Visitors />\n            <ContributionsActivity />\n            <NotFound />\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/progress-example.json b/apps/v4/public/r/styles/radix-sera/progress-example.json
new file mode 100644
index 0000000000..890f510be4
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/progress-example.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "progress-example",
+  "title": "Progress",
+  "registryDependencies": [
+    "field",
+    "item",
+    "progress",
+    "slider",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/progress-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Field, FieldLabel } from \"@/registry/radix-sera/ui/field\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-sera/ui/item\"\nimport { Progress } from \"@/registry/radix-sera/ui/progress\"\nimport { Slider } from \"@/registry/radix-sera/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"progress-upload\">\n          <span>Upload progress</span>\n          <span className=\"ml-auto\">66%</span>\n        </FieldLabel>\n        <Progress value={66} className=\"w-full\" id=\"progress-upload\" />\n      </Field>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState([50])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value[0]} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-sm text-muted-foreground\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/progress.json b/apps/v4/public/r/styles/radix-sera/progress.json
new file mode 100644
index 0000000000..a50d10129f
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/progress.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "progress",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/progress.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Progress as ProgressPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction Progress({\n  className,\n  value,\n  ...props\n}: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(\n        \"relative flex h-0.5 w-full items-center overflow-x-hidden rounded-none bg-muted\",\n        className\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"size-full flex-1 bg-primary transition-all\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  )\n}\n\nexport { Progress }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/progress",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/progress-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/progress.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/radio-group-example.json b/apps/v4/public/r/styles/radix-sera/radio-group-example.json
new file mode 100644
index 0000000000..7540832852
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/radio-group-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "radio-group-example",
+  "title": "Radio Group",
+  "registryDependencies": [
+    "field",
+    "radio-group",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/radio-group-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/radix-sera/ui/field\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-sera/ui/radio-group\"\n\nexport default function RadioGroupExample() {\n  return (\n    <ExampleWrapper>\n      <RadioGroupBasic />\n      <RadioGroupWithDescriptions />\n      <RadioGroupWithFieldSet />\n      <RadioGroupGrid />\n      <RadioGroupDisabled />\n      <RadioGroupInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction RadioGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <RadioGroup defaultValue=\"comfortable\">\n        <Field orientation=\"horizontal\">\n          <RadioGroupItem value=\"default\" id=\"r1\" />\n          <FieldLabel htmlFor=\"r1\" className=\"font-normal\">\n            Default\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n          <FieldLabel htmlFor=\"r2\" className=\"font-normal\">\n            Comfortable\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <RadioGroupItem value=\"compact\" id=\"r3\" />\n          <FieldLabel htmlFor=\"r3\" className=\"font-normal\">\n            Compact\n          </FieldLabel>\n        </Field>\n      </RadioGroup>\n    </Example>\n  )\n}\n\nfunction RadioGroupWithDescriptions() {\n  return (\n    <Example title=\"With Descriptions\">\n      <RadioGroup defaultValue=\"plus\">\n        <FieldLabel htmlFor=\"plus-plan\">\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <div className=\"font-medium\">Plus</div>\n              <FieldDescription>\n                For individuals and small teams\n              </FieldDescription>\n            </FieldContent>\n            <RadioGroupItem value=\"plus\" id=\"plus-plan\" />\n          </Field>\n        </FieldLabel>\n        <FieldLabel htmlFor=\"pro-plan\">\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <div className=\"font-medium\">Pro</div>\n              <FieldDescription>For growing businesses</FieldDescription>\n            </FieldContent>\n            <RadioGroupItem value=\"pro\" id=\"pro-plan\" />\n          </Field>\n        </FieldLabel>\n        <FieldLabel htmlFor=\"enterprise-plan\">\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <div className=\"font-medium\">Enterprise</div>\n              <FieldDescription>\n                For large teams and enterprises\n              </FieldDescription>\n            </FieldContent>\n            <RadioGroupItem value=\"enterprise\" id=\"enterprise-plan\" />\n          </Field>\n        </FieldLabel>\n      </RadioGroup>\n    </Example>\n  )\n}\n\nfunction RadioGroupWithFieldSet() {\n  return (\n    <Example title=\"With FieldSet\">\n      <FieldSet>\n        <FieldLegend>Battery Level</FieldLegend>\n        <FieldDescription>\n          Choose your preferred battery level.\n        </FieldDescription>\n        <RadioGroup defaultValue=\"medium\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"high\" id=\"battery-high\" />\n            <FieldLabel htmlFor=\"battery-high\" className=\"font-normal\">\n              High\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n            <FieldLabel htmlFor=\"battery-medium\" className=\"font-normal\">\n              Medium\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"low\" id=\"battery-low\" />\n            <FieldLabel htmlFor=\"battery-low\" className=\"font-normal\">\n              Low\n            </FieldLabel>\n          </Field>\n        </RadioGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction RadioGroupGrid() {\n  return (\n    <Example title=\"Grid Layout\">\n      <RadioGroup defaultValue=\"medium\" className=\"grid grid-cols-2 gap-2\">\n        <FieldLabel htmlFor=\"size-small\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"small\" id=\"size-small\" />\n            <div className=\"font-medium\">Small</div>\n          </Field>\n        </FieldLabel>\n        <FieldLabel htmlFor=\"size-medium\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"medium\" id=\"size-medium\" />\n            <div className=\"font-medium\">Medium</div>\n          </Field>\n        </FieldLabel>\n        <FieldLabel htmlFor=\"size-large\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"large\" id=\"size-large\" />\n            <div className=\"font-medium\">Large</div>\n          </Field>\n        </FieldLabel>\n        <FieldLabel htmlFor=\"size-xlarge\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"xlarge\" id=\"size-xlarge\" />\n            <div className=\"font-medium\">X-Large</div>\n          </Field>\n        </FieldLabel>\n      </RadioGroup>\n    </Example>\n  )\n}\n\nfunction RadioGroupDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <RadioGroup defaultValue=\"option2\" disabled>\n        <Field orientation=\"horizontal\">\n          <RadioGroupItem value=\"option1\" id=\"disabled-1\" />\n          <FieldLabel htmlFor=\"disabled-1\" className=\"font-normal\">\n            Option 1\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <RadioGroupItem value=\"option2\" id=\"disabled-2\" />\n          <FieldLabel htmlFor=\"disabled-2\" className=\"font-normal\">\n            Option 2\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <RadioGroupItem value=\"option3\" id=\"disabled-3\" />\n          <FieldLabel htmlFor=\"disabled-3\" className=\"font-normal\">\n            Option 3\n          </FieldLabel>\n        </Field>\n      </RadioGroup>\n    </Example>\n  )\n}\n\nfunction RadioGroupInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <FieldSet>\n        <FieldLegend>Notification Preferences</FieldLegend>\n        <FieldDescription>\n          Choose how you want to receive notifications.\n        </FieldDescription>\n        <RadioGroup defaultValue=\"email\">\n          <Field orientation=\"horizontal\" data-invalid>\n            <RadioGroupItem value=\"email\" id=\"invalid-email\" aria-invalid />\n            <FieldLabel htmlFor=\"invalid-email\" className=\"font-normal\">\n              Email only\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\" data-invalid>\n            <RadioGroupItem value=\"sms\" id=\"invalid-sms\" aria-invalid />\n            <FieldLabel htmlFor=\"invalid-sms\" className=\"font-normal\">\n              SMS only\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\" data-invalid>\n            <RadioGroupItem value=\"both\" id=\"invalid-both\" aria-invalid />\n            <FieldLabel htmlFor=\"invalid-both\" className=\"font-normal\">\n              Both Email & SMS\n            </FieldLabel>\n          </Field>\n        </RadioGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/radio-group.json b/apps/v4/public/r/styles/radix-sera/radio-group.json
new file mode 100644
index 0000000000..c642343f51
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/radio-group.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "radio-group",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/radio-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid w-full gap-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"group/radio-group-item peer relative flex aspect-square size-4.5 shrink-0 rounded-full border border-input bg-transparent outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-foreground dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-foreground\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex size-4.5 items-center justify-center\"\n      >\n        <span className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-foreground\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/radio-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/radio-group-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/radio-group.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/registry.json b/apps/v4/public/r/styles/radix-sera/registry.json
new file mode 100644
index 0000000000..3d1cb961f8
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/registry.json
@@ -0,0 +1,3516 @@
+{
+  "name": "shadcn/ui",
+  "homepage": "https://ui.shadcn.com",
+  "items": [
+    {
+      "name": "index",
+      "dependencies": ["class-variance-authority", "lucide-react", "radix-ui"],
+      "devDependencies": ["tw-animate-css", "shadcn"],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "cssVars": {},
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@import \"shadcn/tailwind.css\"": {},
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          }
+        }
+      },
+      "type": "registry:style"
+    },
+    {
+      "name": "style",
+      "dependencies": ["class-variance-authority", "lucide-react", "radix-ui"],
+      "devDependencies": ["tw-animate-css", "shadcn"],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "cssVars": {},
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@import \"shadcn/tailwind.css\"": {},
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          }
+        }
+      },
+      "type": "registry:style"
+    },
+    {
+      "name": "accordion",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/accordion.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/accordion",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/accordion-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/accordion.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "alert",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/alert.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/alert",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "alert-dialog",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/alert-dialog.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/alert-dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-dialog-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/alert-dialog.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "aspect-ratio",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/aspect-ratio.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/aspect-ratio",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/aspect-ratio-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/aspect-ratio.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "avatar",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/avatar.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/avatar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/avatar-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/avatar.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "badge",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/badge.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/badge",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/badge-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "breadcrumb",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/breadcrumb.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/breadcrumb",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/breadcrumb-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "button",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/button.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/button",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "button-group",
+      "registryDependencies": ["separator"],
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/button-group.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/button-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-group-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "calendar",
+      "dependencies": ["react-day-picker@latest", "date-fns"],
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/calendar.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/calendar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/calendar-example.tsx",
+          "api": "https://react-day-picker.js.org"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "card",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/card.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/card-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "carousel",
+      "dependencies": ["embla-carousel-react"],
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/carousel.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/carousel",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/carousel-example.tsx",
+          "api": "https://www.embla-carousel.com/get-started/react"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "chart",
+      "dependencies": ["recharts@3.8.0"],
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/chart.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/chart",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/chart-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "checkbox",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/checkbox.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/checkbox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/checkbox-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/checkbox.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "collapsible",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/collapsible.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/collapsible",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/collapsible-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/collapsible.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "combobox",
+      "dependencies": ["@base-ui/react"],
+      "registryDependencies": ["button", "input-group"],
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/combobox.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/combobox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/combobox-example.tsx",
+          "api": "https://base-ui.com/react/components/combobox"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "command",
+      "dependencies": ["cmdk"],
+      "registryDependencies": ["dialog", "input-group"],
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/command.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/command",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/command-example.tsx",
+          "api": "https://github.com/dip/cmdk"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "context-menu",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/context-menu.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/context-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/context-menu-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/context-menu.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "dialog",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/dialog.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dialog-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "drawer",
+      "dependencies": ["vaul"],
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/drawer.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/drawer",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/drawer-example.tsx",
+          "api": "https://vaul.emilkowal.ski/getting-started"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "dropdown-menu",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/dropdown-menu.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/dropdown-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/dropdown-menu.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "empty",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/empty.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/empty",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/empty-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "field",
+      "registryDependencies": ["label", "separator"],
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/field.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/field",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/field-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "form",
+      "type": "registry:ui"
+    },
+    {
+      "name": "hover-card",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/hover-card.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/hover-card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/hover-card-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/hover-card.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "input",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/input.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/input",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "input-group",
+      "registryDependencies": ["button", "input", "textarea"],
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/input-group.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/input-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-group-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "input-otp",
+      "dependencies": ["input-otp"],
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/input-otp.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/input-otp",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-otp-example.tsx",
+          "api": "https://input-otp.rodz.dev"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "item",
+      "registryDependencies": ["separator"],
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/item.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/item",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/item-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "label",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/label.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/label",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/label-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/label.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "menubar",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/menubar.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/menubar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/menubar-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/menubar.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "navigation-menu",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/navigation-menu.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/navigation-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/navigation-menu.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "pagination",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/pagination.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/pagination",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/pagination-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "popover",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/popover.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/popover",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/popover-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/popover.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "progress",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/progress.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/progress",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/progress-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/progress.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "radio-group",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/radio-group.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/radio-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/radio-group-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/radio-group.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "resizable",
+      "dependencies": ["react-resizable-panels"],
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/resizable.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/resizable",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/resizable-example.tsx",
+          "api": "https://github.com/bvaughn/react-resizable-panels"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "scroll-area",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/scroll-area.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/scroll-area",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/scroll-area-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/scroll-area.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "select",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/select.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/select-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/select.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "separator",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/separator.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/separator",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/separator-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/separator.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "sheet",
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/sheet.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/sheet",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sheet-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "sidebar",
+      "registryDependencies": [
+        "button",
+        "separator",
+        "sheet",
+        "tooltip",
+        "input",
+        "use-mobile",
+        "skeleton"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/sidebar.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/sidebar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sidebar-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "skeleton",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/skeleton.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/skeleton",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/skeleton-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "slider",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/slider.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/slider",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/slider-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/slider.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "sonner",
+      "dependencies": ["sonner", "next-themes"],
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/sonner.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/sonner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sonner-example.tsx",
+          "api": "https://sonner.emilkowal.ski"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "spinner",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/spinner.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/spinner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/spinner-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "switch",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/switch.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/switch",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/switch-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/switch.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "table",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/table.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/table",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/table-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "tabs",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/tabs.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/tabs",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tabs-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/tabs.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "textarea",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/textarea.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/textarea",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/textarea-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "toggle",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/toggle.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/toggle",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/toggle.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "toggle-group",
+      "registryDependencies": ["toggle"],
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/toggle-group.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/toggle-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-group-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/toggle-group.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "tooltip",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/tooltip.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/tooltip",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tooltip-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/tooltip.md"
+        }
+      },
+      "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
+      "type": "registry:ui"
+    },
+    {
+      "name": "kbd",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/kbd.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/kbd",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/kbd-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "native-select",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/native-select.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/native-select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/native-select-example.tsx"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "direction",
+      "files": [
+        {
+          "path": "registry/radix-sera/ui/direction.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/direction",
+          "api": "https://www.radix-ui.com/primitives/docs/utilities/direction-provider.md"
+        }
+      },
+      "type": "registry:ui"
+    },
+    {
+      "name": "accordion-example",
+      "title": "Accordion",
+      "registryDependencies": ["accordion", "button", "card", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/accordion-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "alert-example",
+      "title": "Alert",
+      "registryDependencies": ["alert", "badge", "button", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/alert-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "alert-dialog-example",
+      "title": "Alert Dialog",
+      "registryDependencies": ["alert-dialog", "button", "dialog", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/alert-dialog-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "aspect-ratio-example",
+      "title": "Aspect Ratio",
+      "registryDependencies": ["aspect-ratio", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/aspect-ratio-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "avatar-example",
+      "title": "Avatar",
+      "registryDependencies": ["avatar", "button", "empty", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/avatar-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "badge-example",
+      "title": "Badge",
+      "registryDependencies": ["badge", "spinner", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/badge-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "breadcrumb-example",
+      "title": "Breadcrumb",
+      "registryDependencies": ["breadcrumb", "dropdown-menu", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/breadcrumb-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "button-example",
+      "title": "Button",
+      "registryDependencies": ["button", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/button-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "button-group-example",
+      "title": "Button Group",
+      "registryDependencies": [
+        "button",
+        "button-group",
+        "dropdown-menu",
+        "field",
+        "input",
+        "input-group",
+        "label",
+        "popover",
+        "select",
+        "tooltip",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/button-group-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "calendar-example",
+      "title": "Calendar",
+      "registryDependencies": [
+        "button",
+        "calendar",
+        "card",
+        "field",
+        "input",
+        "label",
+        "popover",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/calendar-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "card-example",
+      "title": "Card",
+      "registryDependencies": [
+        "avatar",
+        "button",
+        "card",
+        "field",
+        "input",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/card-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "carousel-example",
+      "title": "Carousel",
+      "registryDependencies": ["card", "carousel", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/carousel-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "chart-example",
+      "title": "Chart",
+      "registryDependencies": ["chart", "card", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/chart-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "checkbox-example",
+      "title": "Checkbox",
+      "registryDependencies": ["checkbox", "field", "table", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/checkbox-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "collapsible-example",
+      "title": "Collapsible",
+      "registryDependencies": [
+        "button",
+        "card",
+        "collapsible",
+        "field",
+        "input",
+        "tabs",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/collapsible-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "combobox-example",
+      "title": "Combobox",
+      "registryDependencies": [
+        "button",
+        "card",
+        "combobox",
+        "dialog",
+        "field",
+        "input",
+        "input-group",
+        "item",
+        "select",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/combobox-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "command-example",
+      "title": "Command",
+      "registryDependencies": ["button", "command", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/command-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "context-menu-example",
+      "title": "Context Menu",
+      "registryDependencies": ["button", "context-menu", "dialog", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/context-menu-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "dialog-example",
+      "title": "Dialog",
+      "registryDependencies": [
+        "button",
+        "checkbox",
+        "dialog",
+        "field",
+        "input",
+        "input-group",
+        "kbd",
+        "native-select",
+        "select",
+        "switch",
+        "tabs",
+        "textarea",
+        "tooltip",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/dialog-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "drawer-example",
+      "title": "Drawer",
+      "registryDependencies": ["drawer", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/drawer-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "dropdown-menu-example",
+      "title": "Dropdown Menu",
+      "registryDependencies": [
+        "avatar",
+        "button",
+        "dialog",
+        "dropdown-menu",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/dropdown-menu-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "empty-example",
+      "title": "Empty",
+      "registryDependencies": [
+        "button",
+        "empty",
+        "input-group",
+        "kbd",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/empty-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "field-example",
+      "title": "Field",
+      "registryDependencies": [
+        "badge",
+        "checkbox",
+        "field",
+        "input",
+        "input-otp",
+        "native-select",
+        "radio-group",
+        "select",
+        "slider",
+        "switch",
+        "textarea",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/field-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "hover-card-example",
+      "title": "Hover Card",
+      "registryDependencies": ["button", "dialog", "hover-card", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/hover-card-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "input-example",
+      "title": "Input",
+      "registryDependencies": [
+        "button",
+        "field",
+        "input",
+        "native-select",
+        "select",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/input-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "input-group-example",
+      "title": "Input Group",
+      "registryDependencies": [
+        "button",
+        "button-group",
+        "card",
+        "dropdown-menu",
+        "field",
+        "input",
+        "input-group",
+        "kbd",
+        "popover",
+        "spinner",
+        "textarea",
+        "tooltip",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/input-group-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "input-otp-example",
+      "title": "Input OTP",
+      "registryDependencies": [
+        "button",
+        "card",
+        "field",
+        "input-otp",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/input-otp-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "item-example",
+      "title": "Item",
+      "registryDependencies": ["button", "item", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/item-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "kbd-example",
+      "title": "Kbd",
+      "registryDependencies": [
+        "button",
+        "input-group",
+        "kbd",
+        "tooltip",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/kbd-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "label-example",
+      "title": "Label",
+      "registryDependencies": [
+        "checkbox",
+        "field",
+        "input",
+        "label",
+        "textarea",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/label-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "menubar-example",
+      "title": "Menubar",
+      "registryDependencies": ["button", "dialog", "menubar", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/menubar-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "native-select-example",
+      "title": "Native Select",
+      "registryDependencies": ["field", "native-select", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/native-select-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "navigation-menu-example",
+      "title": "Navigation Menu",
+      "registryDependencies": [
+        "button",
+        "dialog",
+        "navigation-menu",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/navigation-menu-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "pagination-example",
+      "title": "Pagination",
+      "registryDependencies": ["field", "pagination", "select", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/pagination-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "popover-example",
+      "title": "Popover",
+      "registryDependencies": [
+        "button",
+        "dialog",
+        "field",
+        "input",
+        "popover",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/popover-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "progress-example",
+      "title": "Progress",
+      "registryDependencies": [
+        "field",
+        "item",
+        "progress",
+        "slider",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/progress-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "radio-group-example",
+      "title": "Radio Group",
+      "registryDependencies": ["field", "radio-group", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/radio-group-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "resizable-example",
+      "title": "Resizable",
+      "registryDependencies": ["resizable", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/resizable-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "scroll-area-example",
+      "title": "Scroll Area",
+      "registryDependencies": ["scroll-area", "separator", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/scroll-area-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "select-example",
+      "title": "Select",
+      "registryDependencies": [
+        "button",
+        "dialog",
+        "field",
+        "input",
+        "item",
+        "native-select",
+        "select",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/select-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "separator-example",
+      "title": "Separator",
+      "registryDependencies": ["separator", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/separator-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "sheet-example",
+      "title": "Sheet",
+      "registryDependencies": ["button", "field", "input", "sheet", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/sheet-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "sidebar-example",
+      "title": "Sidebar",
+      "registryDependencies": [
+        "button",
+        "dropdown-menu",
+        "item",
+        "label",
+        "sidebar",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/sidebar-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "sidebar-icon-example",
+      "title": "Sidebar (Icon)",
+      "registryDependencies": [
+        "avatar",
+        "button",
+        "collapsible",
+        "dropdown-menu",
+        "item",
+        "sidebar",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/sidebar-icon-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "sidebar-inset-example",
+      "title": "Sidebar (Inset)",
+      "registryDependencies": ["collapsible", "sidebar", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/sidebar-inset-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "sidebar-floating-example",
+      "title": "Sidebar (Floating)",
+      "registryDependencies": [
+        "button",
+        "card",
+        "dropdown-menu",
+        "field",
+        "item",
+        "sidebar",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/sidebar-floating-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "skeleton-example",
+      "title": "Skeleton",
+      "registryDependencies": ["skeleton", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/skeleton-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "slider-example",
+      "title": "Slider",
+      "registryDependencies": ["label", "slider", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/slider-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "sonner-example",
+      "title": "Sonner",
+      "registryDependencies": ["sonner", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/sonner-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "spinner-example",
+      "title": "Spinner",
+      "registryDependencies": [
+        "badge",
+        "button",
+        "empty",
+        "field",
+        "input-group",
+        "spinner",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/spinner-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "switch-example",
+      "title": "Switch",
+      "registryDependencies": ["field", "label", "switch", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/switch-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "table-example",
+      "title": "Table",
+      "registryDependencies": [
+        "button",
+        "dropdown-menu",
+        "input",
+        "select",
+        "table",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/table-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "tabs-example",
+      "title": "Tabs",
+      "registryDependencies": ["button", "dropdown-menu", "tabs", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/tabs-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "textarea-example",
+      "title": "Textarea",
+      "registryDependencies": ["field", "textarea", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/textarea-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "toggle-example",
+      "title": "Toggle",
+      "registryDependencies": ["toggle", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/toggle-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "toggle-group-example",
+      "title": "Toggle Group",
+      "registryDependencies": ["input", "select", "toggle-group", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/toggle-group-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "tooltip-example",
+      "title": "Tooltip",
+      "registryDependencies": ["button", "kbd", "tooltip", "example"],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/tooltip-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "demo",
+      "title": "Demo",
+      "registryDependencies": [
+        "alert-dialog",
+        "badge",
+        "button",
+        "button-group",
+        "card",
+        "checkbox",
+        "dropdown-menu",
+        "field",
+        "input-group",
+        "item",
+        "radio-group",
+        "slider",
+        "switch",
+        "textarea"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/demo.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "component-example",
+      "title": "Example",
+      "registryDependencies": [
+        "alert-dialog",
+        "badge",
+        "button",
+        "card",
+        "combobox",
+        "dropdown-menu",
+        "field",
+        "input",
+        "select",
+        "textarea",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/examples/component-example.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
+    {
+      "name": "utils",
+      "dependencies": ["clsx", "tailwind-merge"],
+      "files": [
+        {
+          "path": "registry/radix-sera/lib/utils.ts",
+          "type": "registry:lib"
+        }
+      ],
+      "type": "registry:lib"
+    },
+    {
+      "name": "example",
+      "title": "Example",
+      "files": [
+        {
+          "path": "registry/radix-sera/components/example.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "type": "registry:component"
+    },
+    {
+      "name": "preview",
+      "title": "Preview",
+      "registryDependencies": [
+        "alert-dialog",
+        "avatar",
+        "badge",
+        "button",
+        "button-group",
+        "card",
+        "checkbox",
+        "combobox",
+        "dropdown-menu",
+        "empty",
+        "field",
+        "input",
+        "input-group",
+        "item",
+        "label",
+        "popover",
+        "radio-group",
+        "select",
+        "separator",
+        "sheet",
+        "slider",
+        "spinner",
+        "switch",
+        "textarea",
+        "tooltip",
+        "example"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/preview/index.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "type": "registry:block"
+    },
+    {
+      "name": "preview-02",
+      "title": "Preview 02",
+      "dependencies": ["react-qr-code"],
+      "registryDependencies": [
+        "accordion",
+        "badge",
+        "breadcrumb",
+        "button",
+        "calendar",
+        "card",
+        "chart",
+        "checkbox",
+        "combobox",
+        "dropdown-menu",
+        "empty",
+        "field",
+        "input",
+        "input-group",
+        "item",
+        "label",
+        "native-select",
+        "progress",
+        "radio-group",
+        "select",
+        "separator",
+        "sidebar",
+        "skeleton",
+        "slider",
+        "spinner",
+        "switch",
+        "table",
+        "tabs",
+        "textarea",
+        "toggle-group"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/preview-02/index.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "type": "registry:block"
+    },
+    {
+      "name": "login-01",
+      "title": "Login 01",
+      "description": "A simple login form.",
+      "registryDependencies": ["button", "card", "input", "label", "field"],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/login-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/login-01/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["authentication", "login"],
+      "type": "registry:block"
+    },
+    {
+      "name": "login-02",
+      "title": "Login 02",
+      "description": "A two column login page with a cover image.",
+      "registryDependencies": ["button", "input", "label", "field"],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/login-02/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/login-02/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["authentication", "login"],
+      "type": "registry:block"
+    },
+    {
+      "name": "login-03",
+      "title": "Login 03",
+      "description": "A login page with a muted background color.",
+      "registryDependencies": ["button", "card", "input", "label", "field"],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/login-03/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/login-03/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["authentication", "login"],
+      "type": "registry:block"
+    },
+    {
+      "name": "login-04",
+      "title": "Login 04",
+      "description": "A login page with form and image.",
+      "registryDependencies": ["button", "card", "input", "label", "field"],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/login-04/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/login-04/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["authentication", "login"],
+      "type": "registry:block"
+    },
+    {
+      "name": "login-05",
+      "title": "Login 05",
+      "description": "A simple email-only login page.",
+      "registryDependencies": ["button", "input", "label", "field"],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/login-05/page.tsx",
+          "type": "registry:page",
+          "target": "app/login/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/login-05/components/login-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["authentication", "login"],
+      "type": "registry:block"
+    },
+    {
+      "name": "signup-01",
+      "title": "Signup 01",
+      "description": "A simple signup form.",
+      "registryDependencies": ["button", "card", "input", "label"],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/signup-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/signup/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/signup-01/components/signup-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["authentication", "signup"],
+      "type": "registry:block"
+    },
+    {
+      "name": "signup-02",
+      "title": "Signup 02",
+      "description": "A two column signup page with a cover image.",
+      "registryDependencies": ["button", "input", "label", "field"],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/signup-02/page.tsx",
+          "type": "registry:page",
+          "target": "app/signup/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/signup-02/components/signup-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["authentication", "signup"],
+      "type": "registry:block"
+    },
+    {
+      "name": "signup-03",
+      "title": "Signup 03",
+      "description": "A signup page with a muted background color.",
+      "registryDependencies": ["button", "card", "input", "label", "field"],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/signup-03/page.tsx",
+          "type": "registry:page",
+          "target": "app/signup/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/signup-03/components/signup-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["authentication", "signup"],
+      "type": "registry:block"
+    },
+    {
+      "name": "signup-04",
+      "title": "Signup 04",
+      "description": "A signup page with form and image.",
+      "registryDependencies": ["button", "card", "input", "label", "field"],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/signup-04/page.tsx",
+          "type": "registry:page",
+          "target": "app/signup/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/signup-04/components/signup-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["authentication", "signup"],
+      "type": "registry:block"
+    },
+    {
+      "name": "signup-05",
+      "title": "Signup 05",
+      "description": "A simple signup form with social providers.",
+      "registryDependencies": ["button", "input", "label"],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/signup-05/page.tsx",
+          "type": "registry:page",
+          "target": "app/signup/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/signup-05/components/signup-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["authentication", "signup"],
+      "type": "registry:block"
+    },
+    {
+      "name": "dashboard-01",
+      "title": "Dashboard 01",
+      "description": "A dashboard with sidebar, charts and data table.",
+      "dependencies": [
+        "@dnd-kit/core",
+        "@dnd-kit/modifiers",
+        "@dnd-kit/sortable",
+        "@dnd-kit/utilities",
+        "@tanstack/react-table",
+        "zod"
+      ],
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "chart",
+        "card",
+        "select",
+        "tabs",
+        "table",
+        "toggle-group",
+        "badge",
+        "button",
+        "checkbox",
+        "dropdown-menu",
+        "drawer",
+        "input",
+        "avatar",
+        "sheet",
+        "sonner"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/dashboard-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/dashboard-01/data.json",
+          "type": "registry:file",
+          "target": "app/dashboard/data.json"
+        },
+        {
+          "path": "registry/radix-sera/blocks/dashboard-01/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/dashboard-01/components/chart-area-interactive.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/dashboard-01/components/data-table.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/dashboard-01/components/nav-documents.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/dashboard-01/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/dashboard-01/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/dashboard-01/components/nav-user.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/dashboard-01/components/section-cards.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/dashboard-01/components/site-header.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "iframeHeight": "1000px"
+      },
+      "categories": ["dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-01",
+      "title": "Sidebar 01",
+      "description": "A simple sidebar with navigation grouped by section.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/sidebar-01/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-01/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-01/components/search-form.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-01/components/version-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-02",
+      "title": "Sidebar 02",
+      "description": "A sidebar with collapsible sections.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/sidebar-02/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-02/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-02/components/search-form.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-02/components/version-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-03",
+      "title": "Sidebar 03",
+      "description": "A sidebar with submenus.",
+      "registryDependencies": ["sidebar", "breadcrumb"],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/sidebar-03/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-03/components/app-sidebar.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-04",
+      "title": "Sidebar 04",
+      "description": "A floating sidebar with submenus.",
+      "registryDependencies": ["sidebar", "breadcrumb", "separator"],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/sidebar-04/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-04/components/app-sidebar.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-05",
+      "title": "Sidebar 05",
+      "description": "A sidebar with collapsible submenus.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "label",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/sidebar-05/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-05/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-05/components/search-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-06",
+      "title": "Sidebar 06",
+      "description": "A sidebar with submenus as dropdowns.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "card",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/sidebar-06/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-06/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-06/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-07",
+      "title": "Sidebar 07",
+      "description": "A sidebar that collapses to icons.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/sidebar-07/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-07/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-07/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-07/components/nav-projects.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-07/components/nav-user.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-07/components/team-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-08",
+      "title": "Sidebar 08",
+      "description": "An inset sidebar with secondary navigation.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/sidebar-08/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-08/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-08/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-08/components/nav-projects.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-08/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-08/components/nav-user.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-09",
+      "title": "Sidebar 09",
+      "description": "Collapsible nested sidebars.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar",
+        "switch",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/sidebar-09/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-09/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-09/components/nav-user.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-10",
+      "title": "Sidebar 10",
+      "description": "A sidebar in a popover.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/sidebar-10/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-10/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-10/components/nav-actions.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-10/components/nav-favorites.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-10/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-10/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-10/components/nav-workspaces.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-10/components/team-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-11",
+      "title": "Sidebar 11",
+      "description": "A sidebar with a collapsible file tree.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/sidebar-11/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-11/components/app-sidebar.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-12",
+      "title": "Sidebar 12",
+      "description": "A sidebar with a calendar.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "calendar",
+        "dropdown-menu",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/sidebar-12/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-12/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-12/components/calendars.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-12/components/date-picker.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-12/components/nav-user.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-13",
+      "title": "Sidebar 13",
+      "description": "A sidebar in a dialog.",
+      "registryDependencies": ["sidebar", "breadcrumb", "button", "dialog"],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/sidebar-13/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-13/components/settings-dialog.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-14",
+      "title": "Sidebar 14",
+      "description": "A sidebar on the right.",
+      "registryDependencies": ["sidebar", "breadcrumb"],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/sidebar-14/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-14/components/app-sidebar.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-15",
+      "title": "Sidebar 15",
+      "description": "A left and right sidebar.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "popover",
+        "collapsible",
+        "dropdown-menu",
+        "calendar",
+        "avatar"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/sidebar-15/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-15/components/calendars.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-15/components/date-picker.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-15/components/nav-favorites.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-15/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-15/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-15/components/nav-user.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-15/components/nav-workspaces.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-15/components/sidebar-left.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-15/components/sidebar-right.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-15/components/team-switcher.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "sidebar-16",
+      "title": "Sidebar 16",
+      "description": "A sidebar with a sticky site header.",
+      "registryDependencies": [
+        "sidebar",
+        "breadcrumb",
+        "separator",
+        "collapsible",
+        "dropdown-menu",
+        "avatar",
+        "button",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-sera/blocks/sidebar-16/page.tsx",
+          "type": "registry:page",
+          "target": "app/dashboard/page.tsx"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-16/components/app-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-16/components/nav-main.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-16/components/nav-projects.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-16/components/nav-secondary.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-16/components/nav-user.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-16/components/search-form.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/radix-sera/blocks/sidebar-16/components/site-header.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "categories": ["sidebar", "dashboard"],
+      "type": "registry:block"
+    },
+    {
+      "name": "use-mobile",
+      "files": [
+        {
+          "path": "registry/radix-sera/hooks/use-mobile.ts",
+          "type": "registry:hook"
+        }
+      ],
+      "type": "registry:hook"
+    },
+    {
+      "name": "font-geist",
+      "title": "Geist",
+      "type": "registry:font",
+      "font": {
+        "family": "'Geist Variable', sans-serif",
+        "provider": "google",
+        "import": "Geist",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/geist"
+      }
+    },
+    {
+      "name": "font-inter",
+      "title": "Inter",
+      "type": "registry:font",
+      "font": {
+        "family": "'Inter Variable', sans-serif",
+        "provider": "google",
+        "import": "Inter",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/inter"
+      }
+    },
+    {
+      "name": "font-noto-sans",
+      "title": "Noto Sans",
+      "type": "registry:font",
+      "font": {
+        "family": "'Noto Sans Variable', sans-serif",
+        "provider": "google",
+        "import": "Noto_Sans",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/noto-sans"
+      }
+    },
+    {
+      "name": "font-nunito-sans",
+      "title": "Nunito Sans",
+      "type": "registry:font",
+      "font": {
+        "family": "'Nunito Sans Variable', sans-serif",
+        "provider": "google",
+        "import": "Nunito_Sans",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/nunito-sans"
+      }
+    },
+    {
+      "name": "font-figtree",
+      "title": "Figtree",
+      "type": "registry:font",
+      "font": {
+        "family": "'Figtree Variable', sans-serif",
+        "provider": "google",
+        "import": "Figtree",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/figtree"
+      }
+    },
+    {
+      "name": "font-roboto",
+      "title": "Roboto",
+      "type": "registry:font",
+      "font": {
+        "family": "'Roboto Variable', sans-serif",
+        "provider": "google",
+        "import": "Roboto",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/roboto"
+      }
+    },
+    {
+      "name": "font-raleway",
+      "title": "Raleway",
+      "type": "registry:font",
+      "font": {
+        "family": "'Raleway Variable', sans-serif",
+        "provider": "google",
+        "import": "Raleway",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/raleway"
+      }
+    },
+    {
+      "name": "font-dm-sans",
+      "title": "DM Sans",
+      "type": "registry:font",
+      "font": {
+        "family": "'DM Sans Variable', sans-serif",
+        "provider": "google",
+        "import": "DM_Sans",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/dm-sans"
+      }
+    },
+    {
+      "name": "font-public-sans",
+      "title": "Public Sans",
+      "type": "registry:font",
+      "font": {
+        "family": "'Public Sans Variable', sans-serif",
+        "provider": "google",
+        "import": "Public_Sans",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/public-sans"
+      }
+    },
+    {
+      "name": "font-outfit",
+      "title": "Outfit",
+      "type": "registry:font",
+      "font": {
+        "family": "'Outfit Variable', sans-serif",
+        "provider": "google",
+        "import": "Outfit",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/outfit"
+      }
+    },
+    {
+      "name": "font-oxanium",
+      "title": "Oxanium",
+      "type": "registry:font",
+      "font": {
+        "family": "'Oxanium Variable', sans-serif",
+        "provider": "google",
+        "import": "Oxanium",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/oxanium"
+      }
+    },
+    {
+      "name": "font-manrope",
+      "title": "Manrope",
+      "type": "registry:font",
+      "font": {
+        "family": "'Manrope Variable', sans-serif",
+        "provider": "google",
+        "import": "Manrope",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/manrope"
+      }
+    },
+    {
+      "name": "font-space-grotesk",
+      "title": "Space Grotesk",
+      "type": "registry:font",
+      "font": {
+        "family": "'Space Grotesk Variable', sans-serif",
+        "provider": "google",
+        "import": "Space_Grotesk",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/space-grotesk"
+      }
+    },
+    {
+      "name": "font-montserrat",
+      "title": "Montserrat",
+      "type": "registry:font",
+      "font": {
+        "family": "'Montserrat Variable', sans-serif",
+        "provider": "google",
+        "import": "Montserrat",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/montserrat"
+      }
+    },
+    {
+      "name": "font-ibm-plex-sans",
+      "title": "IBM Plex Sans",
+      "type": "registry:font",
+      "font": {
+        "family": "'IBM Plex Sans Variable', sans-serif",
+        "provider": "google",
+        "import": "IBM_Plex_Sans",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/ibm-plex-sans"
+      }
+    },
+    {
+      "name": "font-source-sans-3",
+      "title": "Source Sans 3",
+      "type": "registry:font",
+      "font": {
+        "family": "'Source Sans 3 Variable', sans-serif",
+        "provider": "google",
+        "import": "Source_Sans_3",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/source-sans-3"
+      }
+    },
+    {
+      "name": "font-instrument-sans",
+      "title": "Instrument Sans",
+      "type": "registry:font",
+      "font": {
+        "family": "'Instrument Sans Variable', sans-serif",
+        "provider": "google",
+        "import": "Instrument_Sans",
+        "variable": "--font-sans",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/instrument-sans"
+      }
+    },
+    {
+      "name": "font-jetbrains-mono",
+      "title": "JetBrains Mono",
+      "type": "registry:font",
+      "font": {
+        "family": "'JetBrains Mono Variable', monospace",
+        "provider": "google",
+        "import": "JetBrains_Mono",
+        "variable": "--font-mono",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/jetbrains-mono"
+      }
+    },
+    {
+      "name": "font-geist-mono",
+      "title": "Geist Mono",
+      "type": "registry:font",
+      "font": {
+        "family": "'Geist Mono Variable', monospace",
+        "provider": "google",
+        "import": "Geist_Mono",
+        "variable": "--font-mono",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/geist-mono"
+      }
+    },
+    {
+      "name": "font-noto-serif",
+      "title": "Noto Serif",
+      "type": "registry:font",
+      "font": {
+        "family": "'Noto Serif Variable', serif",
+        "provider": "google",
+        "import": "Noto_Serif",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/noto-serif"
+      }
+    },
+    {
+      "name": "font-roboto-slab",
+      "title": "Roboto Slab",
+      "type": "registry:font",
+      "font": {
+        "family": "'Roboto Slab Variable', serif",
+        "provider": "google",
+        "import": "Roboto_Slab",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/roboto-slab"
+      }
+    },
+    {
+      "name": "font-merriweather",
+      "title": "Merriweather",
+      "type": "registry:font",
+      "font": {
+        "family": "'Merriweather Variable', serif",
+        "provider": "google",
+        "import": "Merriweather",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/merriweather"
+      }
+    },
+    {
+      "name": "font-lora",
+      "title": "Lora",
+      "type": "registry:font",
+      "font": {
+        "family": "'Lora Variable', serif",
+        "provider": "google",
+        "import": "Lora",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/lora"
+      }
+    },
+    {
+      "name": "font-playfair-display",
+      "title": "Playfair Display",
+      "type": "registry:font",
+      "font": {
+        "family": "'Playfair Display Variable', serif",
+        "provider": "google",
+        "import": "Playfair_Display",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/playfair-display"
+      }
+    },
+    {
+      "name": "font-eb-garamond",
+      "title": "EB Garamond",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
+    },
+    {
+      "name": "font-heading-geist",
+      "title": "Geist (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Geist Variable', sans-serif",
+        "provider": "google",
+        "import": "Geist",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/geist"
+      }
+    },
+    {
+      "name": "font-heading-inter",
+      "title": "Inter (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Inter Variable', sans-serif",
+        "provider": "google",
+        "import": "Inter",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/inter"
+      }
+    },
+    {
+      "name": "font-heading-noto-sans",
+      "title": "Noto Sans (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Noto Sans Variable', sans-serif",
+        "provider": "google",
+        "import": "Noto_Sans",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/noto-sans"
+      }
+    },
+    {
+      "name": "font-heading-nunito-sans",
+      "title": "Nunito Sans (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Nunito Sans Variable', sans-serif",
+        "provider": "google",
+        "import": "Nunito_Sans",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/nunito-sans"
+      }
+    },
+    {
+      "name": "font-heading-figtree",
+      "title": "Figtree (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Figtree Variable', sans-serif",
+        "provider": "google",
+        "import": "Figtree",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/figtree"
+      }
+    },
+    {
+      "name": "font-heading-roboto",
+      "title": "Roboto (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Roboto Variable', sans-serif",
+        "provider": "google",
+        "import": "Roboto",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/roboto"
+      }
+    },
+    {
+      "name": "font-heading-raleway",
+      "title": "Raleway (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Raleway Variable', sans-serif",
+        "provider": "google",
+        "import": "Raleway",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/raleway"
+      }
+    },
+    {
+      "name": "font-heading-dm-sans",
+      "title": "DM Sans (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'DM Sans Variable', sans-serif",
+        "provider": "google",
+        "import": "DM_Sans",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/dm-sans"
+      }
+    },
+    {
+      "name": "font-heading-public-sans",
+      "title": "Public Sans (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Public Sans Variable', sans-serif",
+        "provider": "google",
+        "import": "Public_Sans",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/public-sans"
+      }
+    },
+    {
+      "name": "font-heading-outfit",
+      "title": "Outfit (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Outfit Variable', sans-serif",
+        "provider": "google",
+        "import": "Outfit",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/outfit"
+      }
+    },
+    {
+      "name": "font-heading-oxanium",
+      "title": "Oxanium (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Oxanium Variable', sans-serif",
+        "provider": "google",
+        "import": "Oxanium",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/oxanium"
+      }
+    },
+    {
+      "name": "font-heading-manrope",
+      "title": "Manrope (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Manrope Variable', sans-serif",
+        "provider": "google",
+        "import": "Manrope",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/manrope"
+      }
+    },
+    {
+      "name": "font-heading-space-grotesk",
+      "title": "Space Grotesk (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Space Grotesk Variable', sans-serif",
+        "provider": "google",
+        "import": "Space_Grotesk",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/space-grotesk"
+      }
+    },
+    {
+      "name": "font-heading-montserrat",
+      "title": "Montserrat (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Montserrat Variable', sans-serif",
+        "provider": "google",
+        "import": "Montserrat",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/montserrat"
+      }
+    },
+    {
+      "name": "font-heading-ibm-plex-sans",
+      "title": "IBM Plex Sans (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'IBM Plex Sans Variable', sans-serif",
+        "provider": "google",
+        "import": "IBM_Plex_Sans",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/ibm-plex-sans"
+      }
+    },
+    {
+      "name": "font-heading-source-sans-3",
+      "title": "Source Sans 3 (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Source Sans 3 Variable', sans-serif",
+        "provider": "google",
+        "import": "Source_Sans_3",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/source-sans-3"
+      }
+    },
+    {
+      "name": "font-heading-instrument-sans",
+      "title": "Instrument Sans (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Instrument Sans Variable', sans-serif",
+        "provider": "google",
+        "import": "Instrument_Sans",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/instrument-sans"
+      }
+    },
+    {
+      "name": "font-heading-jetbrains-mono",
+      "title": "JetBrains Mono (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'JetBrains Mono Variable', monospace",
+        "provider": "google",
+        "import": "JetBrains_Mono",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/jetbrains-mono"
+      }
+    },
+    {
+      "name": "font-heading-geist-mono",
+      "title": "Geist Mono (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Geist Mono Variable', monospace",
+        "provider": "google",
+        "import": "Geist_Mono",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/geist-mono"
+      }
+    },
+    {
+      "name": "font-heading-noto-serif",
+      "title": "Noto Serif (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Noto Serif Variable', serif",
+        "provider": "google",
+        "import": "Noto_Serif",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/noto-serif"
+      }
+    },
+    {
+      "name": "font-heading-roboto-slab",
+      "title": "Roboto Slab (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Roboto Slab Variable', serif",
+        "provider": "google",
+        "import": "Roboto_Slab",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/roboto-slab"
+      }
+    },
+    {
+      "name": "font-heading-merriweather",
+      "title": "Merriweather (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Merriweather Variable', serif",
+        "provider": "google",
+        "import": "Merriweather",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/merriweather"
+      }
+    },
+    {
+      "name": "font-heading-lora",
+      "title": "Lora (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Lora Variable', serif",
+        "provider": "google",
+        "import": "Lora",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/lora"
+      }
+    },
+    {
+      "name": "font-heading-playfair-display",
+      "title": "Playfair Display (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'Playfair Display Variable', serif",
+        "provider": "google",
+        "import": "Playfair_Display",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/playfair-display"
+      }
+    },
+    {
+      "name": "font-heading-eb-garamond",
+      "title": "EB Garamond (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
+    }
+  ]
+}
diff --git a/apps/v4/public/r/styles/radix-sera/resizable-example.json b/apps/v4/public/r/styles/radix-sera/resizable-example.json
new file mode 100644
index 0000000000..ed1a5fb4f3
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/resizable-example.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable-example",
+  "title": "Resizable",
+  "registryDependencies": [
+    "resizable",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/resizable-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/radix-sera/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/resizable.json b/apps/v4/public/r/styles/radix-sera/resizable.json
new file mode 100644
index 0000000000..f71f5fd1c3
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/resizable.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "resizable",
+  "dependencies": [
+    "react-resizable-panels"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/resizable.tsx",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"z-10 flex h-6 w-1 shrink-0 rounded-none bg-border\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/resizable",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/resizable-example.tsx",
+      "api": "https://github.com/bvaughn/react-resizable-panels"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/scroll-area-example.json b/apps/v4/public/r/styles/radix-sera/scroll-area-example.json
new file mode 100644
index 0000000000..4d440788f8
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/scroll-area-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll-area-example",
+  "title": "Scroll Area",
+  "registryDependencies": [
+    "scroll-area",
+    "separator",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/scroll-area-example.tsx",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/radix-sera/ui/scroll-area\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 overflow-hidden rounded-md border style-lyra:rounded-none style-maia:rounded-2xl style-luma:rounded-2xl style-sera:rounded-none\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 overflow-hidden rounded-md border p-4 **:data-[slot=scroll-area-viewport]:rounded-md style-lyra:rounded-none style-lyra:**:data-[slot=scroll-area-viewport]:rounded-none style-maia:rounded-2xl style-luma:rounded-2xl style-sera:rounded-none style-sera:**:data-[slot=scroll-area-viewport]:rounded-none\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md style-lyra:rounded-none style-sera:rounded-none\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-3/4 h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n                Photo by{\" \"}\n                <span className=\"font-semibold text-foreground\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/scroll-area.json b/apps/v4/public/r/styles/radix-sera/scroll-area.json
new file mode 100644
index 0000000000..7f4e756489
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/scroll-area.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll-area",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/scroll-area.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-none bg-border\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/scroll-area",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/scroll-area-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/scroll-area.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/select-example.json b/apps/v4/public/r/styles/radix-sera/select-example.json
new file mode 100644
index 0000000000..5a84bceaac
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/select-example.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select-example",
+  "title": "Select",
+  "registryDependencies": [
+    "button",
+    "dialog",
+    "field",
+    "input",
+    "item",
+    "native-select",
+    "select",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/select-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-sera/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-sera/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-sera/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-sera/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\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=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartLineIcon\"\n                  remixicon=\"RiLineChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\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=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\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=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\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=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\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=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/select.json b/apps/v4/public/r/styles/radix-sera/select.json
new file mode 100644
index 0000000000..6debddadad
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/select.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/select.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1.5 p-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-none border border-transparent border-b-input bg-transparent px-0 py-2 text-sm whitespace-nowrap transition-[color,border-color] outline-none focus-visible:border-b-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive data-placeholder:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-b-destructive/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"pointer-events-none size-4 text-muted-foreground\"\n        />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        data-align-trigger={position === \"item-aligned\"}\n        className={cn(\n          \"cn-menu-target cn-menu-translucent relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\n        \"px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n            className=\"pointer-events-none\"\n          />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\n        \"pointer-events-none -mx-1.5 my-1.5 h-px bg-border\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n        phosphor=\"CaretUpIcon\"\n        remixicon=\"RiArrowUpSLine\"\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/select",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/select-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/select.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/separator-example.json b/apps/v4/public/r/styles/radix-sera/separator-example.json
new file mode 100644
index 0000000000..cdb0784146
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/separator-example.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "separator-example",
+  "title": "Separator",
+  "registryDependencies": [
+    "separator",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/separator-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\n\nexport default function SeparatorExample() {\n  return (\n    <ExampleWrapper>\n      <SeparatorHorizontal />\n      <SeparatorVertical />\n      <SeparatorVerticalMenu />\n      <SeparatorInList />\n    </ExampleWrapper>\n  )\n}\n\nfunction SeparatorHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <div className=\"flex flex-col gap-4 text-sm style-lyra:text-xs/relaxed\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">shadcn/ui</div>\n          <div className=\"text-muted-foreground\">\n            The Foundation for your Design System\n          </div>\n        </div>\n        <Separator />\n        <div>\n          A set of beautifully designed components that you can customize,\n          extend, and build on.\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex h-5 items-center gap-4 text-sm style-lyra:text-xs/relaxed\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVerticalMenu() {\n  return (\n    <Example title=\"Vertical Menu\">\n      <div className=\"flex items-center gap-2 text-sm md:gap-4 style-lyra:text-xs/relaxed\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Settings</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Manage preferences\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Account</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Profile & security\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Help</span>\n          <span className=\"text-xs text-muted-foreground\">Support & docs</span>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorInList() {\n  return (\n    <Example title=\"In List\">\n      <div className=\"flex flex-col gap-2 text-sm style-lyra:text-xs/relaxed\">\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 1</dt>\n          <dd className=\"text-muted-foreground\">Value 1</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 2</dt>\n          <dd className=\"text-muted-foreground\">Value 2</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 3</dt>\n          <dd className=\"text-muted-foreground\">Value 3</dd>\n        </dl>\n      </div>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/separator.json b/apps/v4/public/r/styles/radix-sera/separator.json
new file mode 100644
index 0000000000..408ce231f5
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/separator.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "separator",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/separator.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/separator",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/separator-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/separator.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sheet-example.json b/apps/v4/public/r/styles/radix-sera/sheet-example.json
new file mode 100644
index 0000000000..865bfb55e9
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sheet-example.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sheet-example",
+  "title": "Sheet",
+  "registryDependencies": [
+    "button",
+    "field",
+    "input",
+    "sheet",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/sheet-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-sera/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">Open</Button>\n        </SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6 style-sera:px-8\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6 style-sera:px-8\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed style-sera:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sheet.json b/apps/v4/public/r/styles/radix-sera/sheet.json
new file mode 100644
index 0000000000..be7ab9ae05
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sheet.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sheet",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/sheet.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/20 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"fixed z-50 flex flex-col bg-popover bg-clip-padding text-sm text-popover-foreground shadow-md transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-4 right-4 bg-secondary\"\n              size=\"icon-sm\"\n            >\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\n        \"cn-font-heading text-lg tracking-wider text-foreground uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\n        \"mt-0.5 text-sm leading-relaxed text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/sheet",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sheet-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-01.json b/apps/v4/public/r/styles/radix-sera/sidebar-01.json
new file mode 100644
index 0000000000..e52a5f12bf
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sidebar-01.json
@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-01",
+  "title": "Sidebar 01",
+  "description": "A simple sidebar with navigation grouped by section.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/sidebar-01/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/radix-sera/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-01/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/radix-sera/blocks/sidebar-01/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/radix-sera/blocks/sidebar-01/components/version-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        {/* We create a SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <SidebarGroup key={item.title}>\n            <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {item.items.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild isActive={item.isActive}>\n                      <a href={item.url}>{item.title}</a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-01/components/search-form.tsx",
+      "content": "\"use client\"\n\nimport { Label } from \"@/registry/radix-sera/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent className=\"relative\">\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            placeholder=\"Search the docs...\"\n            className=\"pl-8\"\n          />\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n          />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-01/components/version-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-02.json b/apps/v4/public/r/styles/radix-sera/sidebar-02.json
new file mode 100644
index 0000000000..6f3f5cf143
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sidebar-02.json
@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-02",
+  "title": "Sidebar 02",
+  "description": "A sidebar with collapsible sections.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/sidebar-02/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/radix-sera/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-02/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/radix-sera/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/radix-sera/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-sera/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {item.title}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-02/components/search-form.tsx",
+      "content": "\"use client\"\n\nimport { Label } from \"@/registry/radix-sera/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent className=\"relative\">\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            placeholder=\"Search the docs...\"\n            className=\"pl-8\"\n          />\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n          />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-02/components/version-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-03.json b/apps/v4/public/r/styles/radix-sera/sidebar-03.json
new file mode 100644
index 0000000000..4e37863a8d
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sidebar-03.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-03",
+  "title": "Sidebar 03",
+  "description": "A sidebar with submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/sidebar-03/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/radix-sera/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-03/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-04.json b/apps/v4/public/r/styles/radix-sera/sidebar-04.json
new file mode 100644
index 0000000000..e9ead4ba68
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sidebar-04.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-04",
+  "title": "Sidebar 04",
+  "description": "A floating sidebar with submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/sidebar-04/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/radix-sera/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-04/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-05.json b/apps/v4/public/r/styles/radix-sera/sidebar-05.json
new file mode 100644
index 0000000000..411c9257c0
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sidebar-05.json
@@ -0,0 +1,36 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-05",
+  "title": "Sidebar 05",
+  "description": "A sidebar with collapsible submenus.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "label",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/sidebar-05/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/radix-sera/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-05/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/radix-sera/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-sera/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuButton>\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                        className=\"ml-auto group-data-[state=open]/collapsible:hidden\"\n                      />\n                      <IconPlaceholder\n                        lucide=\"MinusIcon\"\n                        tabler=\"IconMinus\"\n                        hugeicons=\"MinusSignIcon\"\n                        phosphor=\"MinusIcon\"\n                        remixicon=\"RiSubtractLine\"\n                        className=\"ml-auto group-data-[state=closed]/collapsible:hidden\"\n                      />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              asChild\n                              isActive={item.isActive}\n                            >\n                              <a href={item.url}>{item.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-05/components/search-form.tsx",
+      "content": "\"use client\"\n\nimport { Label } from \"@/registry/radix-sera/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent className=\"relative\">\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            placeholder=\"Search the docs...\"\n            className=\"pl-8\"\n          />\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n          />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-06.json b/apps/v4/public/r/styles/radix-sera/sidebar-06.json
new file mode 100644
index 0000000000..10a7458152
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sidebar-06.json
@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-06",
+  "title": "Sidebar 06",
+  "description": "A sidebar with submenus as dropdowns.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "card",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/sidebar-06/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/radix-sera/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-06/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-sera/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/radix-sera/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-06/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup>\n      <SidebarMenu>\n        {items.map((item) => (\n          <DropdownMenu key={item.title}>\n            <SidebarMenuItem>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                  {item.title}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                    remixicon=\"RiMoreLine\"\n                    className=\"ml-auto\"\n                  />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              {item.items?.length ? (\n                <DropdownMenuContent\n                  side={isMobile ? \"bottom\" : \"right\"}\n                  align={isMobile ? \"end\" : \"start\"}\n                  className=\"min-w-56 rounded-lg\"\n                >\n                  {item.items.map((item) => (\n                    <DropdownMenuItem asChild key={item.title}>\n                      <a href={item.url}>{item.title}</a>\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              ) : null}\n            </SidebarMenuItem>\n          </DropdownMenu>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+      "content": "import { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-sera/ui/card\"\nimport { SidebarInput } from \"@/registry/radix-sera/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\">\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-07.json b/apps/v4/public/r/styles/radix-sera/sidebar-07.json
new file mode 100644
index 0000000000..eb4a86a892
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sidebar-07.json
@@ -0,0 +1,52 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-07",
+  "title": "Sidebar 07",
+  "description": "A sidebar that collapses to icons.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/sidebar-07/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/radix-sera/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-07/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-sera/blocks/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"@/registry/radix-sera/blocks/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"@/registry/radix-sera/blocks/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"@/registry/radix-sera/blocks/sidebar-07/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: (\n        <IconPlaceholder\n          lucide=\"AudioLinesIcon\"\n          tabler=\"IconWaveSine\"\n          hugeicons=\"AudioWave01Icon\"\n          phosphor=\"WaveformIcon\"\n          remixicon=\"RiPulseLine\"\n        />\n      ),\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: (\n        <IconPlaceholder\n          lucide=\"TerminalIcon\"\n          tabler=\"IconCommand\"\n          hugeicons=\"CommandIcon\"\n          phosphor=\"CommandIcon\"\n          remixicon=\"RiCommandLine\"\n        />\n      ),\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"icon\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-07/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-sera/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible\n            key={item.title}\n            asChild\n            defaultOpen={item.isActive}\n            className=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger asChild>\n                <SidebarMenuButton tooltip={item.title}>\n                  {item.icon}\n                  <span>{item.title}</span>\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent>\n                <SidebarMenuSub>\n                  {item.items?.map((subItem) => (\n                    <SidebarMenuSubItem key={subItem.title}>\n                      <SidebarMenuSubButton asChild>\n                        <a href={subItem.url}>\n                          <span>{subItem.title}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  ))}\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-07/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: React.ReactNode\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                {item.icon}\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"aria-expanded:bg-muted\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowForward\"\n                    hugeicons=\"ArrowRightIcon\"\n                    phosphor=\"ShareFatIcon\"\n                    remixicon=\"RiShareForwardLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"Trash2Icon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n              className=\"text-sidebar-foreground/70\"\n            />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-07/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto size-4\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BadgeCheckIcon\"\n                  tabler=\"IconRosetteDiscountCheck\"\n                  hugeicons=\"CheckmarkBadgeIcon\"\n                  phosphor=\"CheckCircleIcon\"\n                  remixicon=\"RiCheckboxCircleLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconBell\"\n                  hugeicons=\"NotificationIcon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotificationLine\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-07/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                {activeTeam.logo}\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{activeTeam.name}</span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-08.json b/apps/v4/public/r/styles/radix-sera/sidebar-08.json
new file mode 100644
index 0000000000..67706cc48d
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sidebar-08.json
@@ -0,0 +1,52 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-08",
+  "title": "Sidebar 08",
+  "description": "An inset sidebar with secondary navigation.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/sidebar-08/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/radix-sera/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-08/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-sera/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/radix-sera/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/radix-sera/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/radix-sera/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-08/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-sera/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: React.ReactNode\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>\n            <SidebarMenuItem>\n              <SidebarMenuButton asChild tooltip={item.title}>\n                <a href={item.url}>\n                  {item.icon}\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.items?.length ? (\n                <>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                      <IconPlaceholder\n                        lucide=\"ChevronRightIcon\"\n                        tabler=\"IconChevronRight\"\n                        hugeicons=\"ArrowRight01Icon\"\n                        phosphor=\"CaretRightIcon\"\n                        remixicon=\"RiArrowRightSLine\"\n                      />\n                      <span className=\"sr-only\">Toggle</span>\n                    </SidebarMenuAction>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton asChild>\n                            <a href={subItem.url}>\n                              <span>{subItem.title}</span>\n                            </a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </>\n              ) : null}\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-08/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: React.ReactNode\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                {item.icon}\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"aria-expanded:bg-muted\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare2\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"Trash2Icon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n            />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-08/components/nav-secondary.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild size=\"sm\">\n                <a href={item.url}>\n                  {item.icon}\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-08/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto size-4\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BadgeCheckIcon\"\n                  tabler=\"IconRosetteDiscountCheck\"\n                  hugeicons=\"CheckmarkBadgeIcon\"\n                  phosphor=\"CheckCircleIcon\"\n                  remixicon=\"RiCheckboxCircleLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconBell\"\n                  hugeicons=\"NotificationIcon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotificationLine\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-09.json b/apps/v4/public/r/styles/radix-sera/sidebar-09.json
new file mode 100644
index 0000000000..1ef0e33b96
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sidebar-09.json
@@ -0,0 +1,39 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-09",
+  "title": "Sidebar 09",
+  "description": "Collapsible nested sidebars.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "switch",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/sidebar-09/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/radix-sera/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-09/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavUser } from \"@/registry/radix-sera/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/radix-sera/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { Switch } from \"@/registry/radix-sera/ui/switch\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"FileIcon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArchiveXIcon\"\n          tabler=\"IconArchiveOff\"\n          hugeicons=\"ArchiveIcon\"\n          phosphor=\"ArchiveIcon\"\n          remixicon=\"RiArchiveLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconCommand\"\n                      hugeicons=\"CommandIcon\"\n                      phosphor=\"CommandIcon\"\n                      remixicon=\"RiCommandLine\"\n                      className=\"size-4\"\n                    />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-base font-medium text-foreground\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-09/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto size-4\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BadgeCheckIcon\"\n                  tabler=\"IconRosetteDiscountCheck\"\n                  hugeicons=\"CheckmarkBadgeIcon\"\n                  phosphor=\"CheckCircleIcon\"\n                  remixicon=\"RiCheckboxCircleLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconBell\"\n                  hugeicons=\"NotificationIcon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotificationLine\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-10.json b/apps/v4/public/r/styles/radix-sera/sidebar-10.json
new file mode 100644
index 0000000000..707467a398
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sidebar-10.json
@@ -0,0 +1,62 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-10",
+  "title": "Sidebar 10",
+  "description": "A sidebar in a popover.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/sidebar-10/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/radix-sera/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/radix-sera/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-10/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavFavorites } from \"@/registry/radix-sera/blocks/sidebar-10/components/nav-favorites\"\nimport { NavMain } from \"@/registry/radix-sera/blocks/sidebar-10/components/nav-main\"\nimport { NavSecondary } from \"@/registry/radix-sera/blocks/sidebar-10/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/registry/radix-sera/blocks/sidebar-10/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/registry/radix-sera/blocks/sidebar-10/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: (\n        <IconPlaceholder\n          lucide=\"TerminalIcon\"\n          tabler=\"IconCommand\"\n          hugeicons=\"CommandIcon\"\n          phosphor=\"CommandIcon\"\n          remixicon=\"RiCommandLine\"\n        />\n      ),\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: (\n        <IconPlaceholder\n          lucide=\"AudioLinesIcon\"\n          tabler=\"IconWaveSine\"\n          hugeicons=\"AudioWave01Icon\"\n          phosphor=\"WaveformIcon\"\n          remixicon=\"RiPulseLine\"\n        />\n      ),\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: (\n        <IconPlaceholder\n          lucide=\"TerminalIcon\"\n          tabler=\"IconCommand\"\n          hugeicons=\"CommandIcon\"\n          phosphor=\"CommandIcon\"\n          remixicon=\"RiCommandLine\"\n        />\n      ),\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SearchIcon\"\n          tabler=\"IconSearch\"\n          hugeicons=\"SearchIcon\"\n          phosphor=\"MagnifyingGlassIcon\"\n          remixicon=\"RiSearchLine\"\n        />\n      ),\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SparklesIcon\"\n          tabler=\"IconSparkles\"\n          hugeicons=\"SparklesIcon\"\n          phosphor=\"SparkleIcon\"\n          remixicon=\"RiSparklingLine\"\n        />\n      ),\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CalendarIcon\"\n          tabler=\"IconCalendar\"\n          hugeicons=\"CalendarIcon\"\n          phosphor=\"CalendarIcon\"\n          remixicon=\"RiCalendarLine\"\n        />\n      ),\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BlocksIcon\"\n          tabler=\"IconCube\"\n          hugeicons=\"CubeIcon\"\n          phosphor=\"CubeIcon\"\n          remixicon=\"RiBox3Line\"\n        />\n      ),\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleQuestionIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageQuestionIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiQuestionLine\"\n        />\n      ),\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n        <NavMain items={data.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={data.favorites} />\n        <NavWorkspaces workspaces={data.workspaces} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-10/components/nav-actions.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-sera/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileText\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      label: \"Duplicate\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CopyIcon\"\n          tabler=\"IconCopy\"\n          hugeicons=\"Copy01Icon\"\n          phosphor=\"CopyIcon\"\n          remixicon=\"RiFileCopyLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpRightIcon\"\n          tabler=\"IconCornerUpRight\"\n          hugeicons=\"RedoIcon\"\n          phosphor=\"ArrowBendUpRightIcon\"\n          remixicon=\"RiCornerUpRightLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to Trash\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpLeftIcon\"\n          tabler=\"IconCornerUpLeft\"\n          hugeicons=\"UndoIcon\"\n          phosphor=\"ArrowBendUpLeftIcon\"\n          remixicon=\"RiCornerUpLeftLine\"\n        />\n      ),\n    },\n    {\n      label: \"View analytics\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartLineIcon\"\n          tabler=\"IconChartLine\"\n          hugeicons=\"ChartIcon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiLineChartLine\"\n        />\n      ),\n    },\n    {\n      label: \"Version History\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n    },\n    {\n      label: \"Show delete pages\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TrashIcon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"DeleteIcon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      label: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowUpIcon\"\n          tabler=\"IconArrowUp\"\n          hugeicons=\"ArrowUpIcon\"\n          phosphor=\"ArrowUpIcon\"\n          remixicon=\"RiArrowUpLine\"\n        />\n      ),\n    },\n    {\n      label: \"Export\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowDownIcon\"\n          tabler=\"IconArrowDown\"\n          hugeicons=\"ArrowDownIcon\"\n          phosphor=\"ArrowDownIcon\"\n          remixicon=\"RiArrowDownLine\"\n        />\n      ),\n    },\n  ],\n]\n\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <IconPlaceholder\n          lucide=\"StarIcon\"\n          tabler=\"IconStar\"\n          hugeicons=\"StarIcon\"\n          phosphor=\"StarIcon\"\n          remixicon=\"RiStarLine\"\n        />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-7 w-7 data-[state=open]:bg-accent\"\n          >\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            {item.icon} <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-10/components/nav-favorites.tsx",
+      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url} title={item.name}>\n                <span>{item.emoji}</span>\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"aria-expanded:bg-muted\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"StarOffIcon\"\n                    tabler=\"IconStarOff\"\n                    hugeicons=\"StarOffIcon\"\n                    phosphor=\"StarIcon\"\n                    remixicon=\"RiStarOffLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Remove from Favorites</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"LinkIcon\"\n                    tabler=\"IconLink\"\n                    hugeicons=\"LinkIcon\"\n                    phosphor=\"LinkIcon\"\n                    remixicon=\"RiLinksLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Copy Link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ArrowUpRightIcon\"\n                    tabler=\"IconArrowUpRight\"\n                    hugeicons=\"ArrowUpRightIcon\"\n                    phosphor=\"ArrowUpRightIcon\"\n                    remixicon=\"RiArrowRightUpLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Open in New Tab</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"Trash2Icon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n            />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-10/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: React.ReactNode\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton asChild isActive={item.isActive}>\n            <a href={item.url}>\n              {item.icon}\n              <span>{item.title}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-10/components/nav-secondary.tsx",
+      "content": "\"use client\"\n\nimport React from \"react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: React.ReactNode\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  {item.icon}\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-10/components/nav-workspaces.tsx",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-sera/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                    />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-10/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                {activeTeam.logo}\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                className=\"opacity-50\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-11.json b/apps/v4/public/r/styles/radix-sera/sidebar-11.json
new file mode 100644
index 0000000000..96a2537128
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sidebar-11.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-11",
+  "title": "Sidebar 11",
+  "description": "A sidebar with a collapsible file tree.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/sidebar-11/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/radix-sera/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-11/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-sera/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarRail,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  changes: [\n    {\n      file: \"README.md\",\n      state: \"M\",\n    },\n    {\n      file: \"api/hello/route.ts\",\n      state: \"U\",\n    },\n    {\n      file: \"app/layout.tsx\",\n      state: \"M\",\n    },\n  ],\n  tree: [\n    [\n      \"app\",\n      [\n        \"api\",\n        [\"hello\", [\"route.ts\"]],\n        \"page.tsx\",\n        \"layout.tsx\",\n        [\"blog\", [\"page.tsx\"]],\n      ],\n    ],\n    [\n      \"components\",\n      [\"ui\", \"button.tsx\", \"card.tsx\"],\n      \"header.tsx\",\n      \"footer.tsx\",\n    ],\n    [\"lib\", [\"util.ts\"]],\n    [\"public\", \"favicon.ico\", \"vercel.svg\"],\n    \".eslintrc.json\",\n    \".gitignore\",\n    \"next.config.js\",\n    \"tailwind.config.js\",\n    \"package.json\",\n    \"README.md\",\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Changes</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.changes.map((item, index) => (\n                <SidebarMenuItem key={index}>\n                  <SidebarMenuButton>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    {item.file}\n                  </SidebarMenuButton>\n                  <SidebarMenuBadge>{item.state}</SidebarMenuBadge>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n        <SidebarGroup>\n          <SidebarGroupLabel>Files</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.tree.map((item, index) => (\n                <Tree key={index} item={item} />\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\ntype TreeItem = string | TreeItem[]\n\nfunction Tree({ item }: { item: TreeItem }) {\n  const [name, ...items] = Array.isArray(item) ? item : [item]\n\n  if (!items.length) {\n    return (\n      <SidebarMenuButton\n        isActive={name === \"button.tsx\"}\n        className=\"data-[active=true]:bg-transparent\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"FileIcon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        {name}\n      </SidebarMenuButton>\n    )\n  }\n\n  return (\n    <SidebarMenuItem>\n      <Collapsible\n        className=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n        defaultOpen={name === \"components\" || name === \"ui\"}\n      >\n        <CollapsibleTrigger asChild>\n          <SidebarMenuButton>\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"CaretRightIcon\"\n              remixicon=\"RiArrowRightSLine\"\n              className=\"transition-transform\"\n            />\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"FolderIcon\"\n              phosphor=\"FolderIcon\"\n              remixicon=\"RiFolderLine\"\n            />\n            {name}\n          </SidebarMenuButton>\n        </CollapsibleTrigger>\n        <CollapsibleContent>\n          <SidebarMenuSub>\n            {items.map((subItem, index) => (\n              <Tree key={index} item={subItem} />\n            ))}\n          </SidebarMenuSub>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarMenuItem>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-12.json b/apps/v4/public/r/styles/radix-sera/sidebar-12.json
new file mode 100644
index 0000000000..d8d52468f8
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sidebar-12.json
@@ -0,0 +1,48 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-12",
+  "title": "Sidebar 12",
+  "description": "A sidebar with a calendar.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "calendar",
+    "dropdown-menu",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/sidebar-12/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/radix-sera/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-12/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/radix-sera/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/radix-sera/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/radix-sera/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-12/components/calendars.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-sera/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-12/components/date-picker.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Calendar } from \"@/registry/radix-sera/ui/calendar\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\nexport function DatePicker() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          captionLayout=\"dropdown\"\n          className=\"bg-transparent [--cell-size:2.1rem]\"\n        />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-12/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto size-4\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BadgeCheckIcon\"\n                  tabler=\"IconRosetteDiscountCheck\"\n                  hugeicons=\"CheckmarkBadgeIcon\"\n                  phosphor=\"CheckCircleIcon\"\n                  remixicon=\"RiCheckboxCircleLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconBell\"\n                  hugeicons=\"NotificationIcon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotificationLine\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-13.json b/apps/v4/public/r/styles/radix-sera/sidebar-13.json
new file mode 100644
index 0000000000..b821548685
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sidebar-13.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-13",
+  "title": "Sidebar 13",
+  "description": "A sidebar in a dialog.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "button",
+    "dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/sidebar-13/page.tsx",
+      "content": "import { SettingsDialog } from \"@/registry/radix-sera/blocks/sidebar-13/components/settings-dialog\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex h-svh items-center justify-center\">\n      <SettingsDialog />\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-13/components/settings-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-sera/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-sera/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  nav: [\n    {\n      name: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n    {\n      name: \"Navigation\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MenuIcon\"\n          tabler=\"IconMenu\"\n          hugeicons=\"Menu09Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiMenuLine\"\n        />\n      ),\n    },\n    {\n      name: \"Home\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n    },\n    {\n      name: \"Appearance\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PaintbrushIcon\"\n          tabler=\"IconPalette\"\n          hugeicons=\"PaintBoardIcon\"\n          phosphor=\"PaletteIcon\"\n          remixicon=\"RiPaletteLine\"\n        />\n      ),\n    },\n    {\n      name: \"Messages & media\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiChat1Line\"\n        />\n      ),\n    },\n    {\n      name: \"Language & region\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GlobeIcon\"\n          tabler=\"IconWorld\"\n          hugeicons=\"Globe02Icon\"\n          phosphor=\"GlobeIcon\"\n          remixicon=\"RiGlobalLine\"\n        />\n      ),\n    },\n    {\n      name: \"Accessibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"KeyboardIcon\"\n          tabler=\"IconKeyboard\"\n          hugeicons=\"KeyboardIcon\"\n          phosphor=\"KeyboardIcon\"\n          remixicon=\"RiKeyboardLine\"\n        />\n      ),\n    },\n    {\n      name: \"Mark as read\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      ),\n    },\n    {\n      name: \"Audio & video\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"VideoIcon\"\n          tabler=\"IconVideoPlus\"\n          hugeicons=\"RecordIcon\"\n          phosphor=\"VideoIcon\"\n          remixicon=\"RiVideoLine\"\n        />\n      ),\n    },\n    {\n      name: \"Connected accounts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      name: \"Privacy & visibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LockIcon\"\n          tabler=\"IconLock\"\n          hugeicons=\"ShieldIcon\"\n          phosphor=\"LockIcon\"\n          remixicon=\"RiLockLine\"\n        />\n      ),\n    },\n    {\n      name: \"Advanced\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SettingsIcon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"SettingsIcon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger asChild>\n        <Button size=\"sm\">Open Dialog</Button>\n      </DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          asChild\n                          isActive={item.name === \"Messages & media\"}\n                        >\n                          <a href=\"#\">\n                            {item.icon}\n                            <span>{item.name}</span>\n                          </a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({ length: 10 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-14.json b/apps/v4/public/r/styles/radix-sera/sidebar-14.json
new file mode 100644
index 0000000000..008a7574bc
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sidebar-14.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-14",
+  "title": "Sidebar 14",
+  "description": "A sidebar on the right.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/sidebar-14/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/radix-sera/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-sera/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-14/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <SidebarMenuItem key={item.title}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url} className=\"font-medium\">\n                      {item.title}\n                    </a>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <SidebarMenuSub>\n                      {item.items.map((item) => (\n                        <SidebarMenuSubItem key={item.title}>\n                          <SidebarMenuSubButton\n                            asChild\n                            isActive={item.isActive}\n                          >\n                            <a href={item.url}>{item.title}</a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  ) : null}\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-15.json b/apps/v4/public/r/styles/radix-sera/sidebar-15.json
new file mode 100644
index 0000000000..ab80463572
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sidebar-15.json
@@ -0,0 +1,79 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-15",
+  "title": "Sidebar 15",
+  "description": "A left and right sidebar.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "popover",
+    "collapsible",
+    "dropdown-menu",
+    "calendar",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/sidebar-15/page.tsx",
+      "content": "import { SidebarLeft } from \"@/registry/radix-sera/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/radix-sera/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-screen w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-15/components/calendars.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-sera/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-15/components/date-picker.tsx",
+      "content": "import * as React from \"react\"\n\nimport { Calendar } from \"@/registry/radix-sera/ui/calendar\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\nexport function DatePicker() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          captionLayout=\"dropdown\"\n          className=\"bg-transparent [--cell-size:2.1rem]\"\n        />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-15/components/nav-favorites.tsx",
+      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url} title={item.name}>\n                <span>{item.emoji}</span>\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"aria-expanded:bg-muted\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"StarOffIcon\"\n                    tabler=\"IconStarOff\"\n                    hugeicons=\"StarOffIcon\"\n                    phosphor=\"StarIcon\"\n                    remixicon=\"RiStarOffLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Remove from Favorites</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"LinkIcon\"\n                    tabler=\"IconLink\"\n                    hugeicons=\"LinkIcon\"\n                    phosphor=\"LinkIcon\"\n                    remixicon=\"RiLinksLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Copy Link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ArrowUpRightIcon\"\n                    tabler=\"IconArrowUpRight\"\n                    hugeicons=\"ArrowUpRightIcon\"\n                    phosphor=\"ArrowUpRightIcon\"\n                    remixicon=\"RiArrowRightUpLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Open in New Tab</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"Trash2Icon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n            />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-15/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: React.ReactNode\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton asChild isActive={item.isActive}>\n            <a href={item.url}>\n              {item.icon}\n              <span>{item.title}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-15/components/nav-secondary.tsx",
+      "content": "\"use client\"\n\nimport React from \"react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: React.ReactNode\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  {item.icon}\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-15/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto size-4\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BadgeCheckIcon\"\n                  tabler=\"IconRosetteDiscountCheck\"\n                  hugeicons=\"CheckmarkBadgeIcon\"\n                  phosphor=\"CheckCircleIcon\"\n                  remixicon=\"RiCheckboxCircleLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconBell\"\n                  hugeicons=\"NotificationIcon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotificationLine\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-15/components/nav-workspaces.tsx",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-sera/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                    />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-15/components/sidebar-left.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavFavorites } from \"@/registry/radix-sera/blocks/sidebar-15/components/nav-favorites\"\nimport { NavMain } from \"@/registry/radix-sera/blocks/sidebar-15/components/nav-main\"\nimport { NavSecondary } from \"@/registry/radix-sera/blocks/sidebar-15/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/registry/radix-sera/blocks/sidebar-15/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/registry/radix-sera/blocks/sidebar-15/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: (\n        <IconPlaceholder\n          lucide=\"TerminalIcon\"\n          tabler=\"IconCommand\"\n          hugeicons=\"CommandIcon\"\n          phosphor=\"CommandIcon\"\n          remixicon=\"RiCommandLine\"\n        />\n      ),\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: (\n        <IconPlaceholder\n          lucide=\"AudioLinesIcon\"\n          tabler=\"IconWaveSine\"\n          hugeicons=\"AudioWave01Icon\"\n          phosphor=\"WaveformIcon\"\n          remixicon=\"RiPulseLine\"\n        />\n      ),\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: (\n        <IconPlaceholder\n          lucide=\"TerminalIcon\"\n          tabler=\"IconCommand\"\n          hugeicons=\"CommandIcon\"\n          phosphor=\"CommandIcon\"\n          remixicon=\"RiCommandLine\"\n        />\n      ),\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SearchIcon\"\n          tabler=\"IconSearch\"\n          hugeicons=\"SearchIcon\"\n          phosphor=\"MagnifyingGlassIcon\"\n          remixicon=\"RiSearchLine\"\n        />\n      ),\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SparklesIcon\"\n          tabler=\"IconSparkles\"\n          hugeicons=\"SparklesIcon\"\n          phosphor=\"SparkleIcon\"\n          remixicon=\"RiSparklingLine\"\n        />\n      ),\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CalendarIcon\"\n          tabler=\"IconCalendar\"\n          hugeicons=\"CalendarIcon\"\n          phosphor=\"CalendarIcon\"\n          remixicon=\"RiCalendarLine\"\n        />\n      ),\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BlocksIcon\"\n          tabler=\"IconCube\"\n          hugeicons=\"CubeIcon\"\n          phosphor=\"CubeIcon\"\n          remixicon=\"RiBox3Line\"\n        />\n      ),\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleQuestionIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageQuestionIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiQuestionLine\"\n        />\n      ),\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function SidebarLeft({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n        <NavMain items={data.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={data.favorites} />\n        <NavWorkspaces workspaces={data.workspaces} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-15/components/sidebar-right.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/radix-sera/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/radix-sera/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/radix-sera/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-15/components/team-switcher.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                {activeTeam.logo}\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                className=\"opacity-50\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-16.json b/apps/v4/public/r/styles/radix-sera/sidebar-16.json
new file mode 100644
index 0000000000..fcd0b1e70c
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sidebar-16.json
@@ -0,0 +1,64 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-16",
+  "title": "Sidebar 16",
+  "description": "A sidebar with a sticky site header.",
+  "registryDependencies": [
+    "sidebar",
+    "breadcrumb",
+    "separator",
+    "collapsible",
+    "dropdown-menu",
+    "avatar",
+    "button",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/sidebar-16/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/radix-sera/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/radix-sera/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/radix-sera/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              </div>\n              <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/dashboard/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-16/components/app-sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-sera/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/radix-sera/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/radix-sera/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/radix-sera/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-16/components/nav-main.tsx",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-sera/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: React.ReactNode\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>\n            <SidebarMenuItem>\n              <SidebarMenuButton asChild tooltip={item.title}>\n                <a href={item.url}>\n                  {item.icon}\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.items?.length ? (\n                <>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                      <IconPlaceholder\n                        lucide=\"ChevronRightIcon\"\n                        tabler=\"IconChevronRight\"\n                        hugeicons=\"ArrowRight01Icon\"\n                        phosphor=\"CaretRightIcon\"\n                        remixicon=\"RiArrowRightSLine\"\n                      />\n                      <span className=\"sr-only\">Toggle</span>\n                    </SidebarMenuAction>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton asChild>\n                            <a href={subItem.url}>\n                              <span>{subItem.title}</span>\n                            </a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </>\n              ) : null}\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-16/components/nav-projects.tsx",
+      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: React.ReactNode\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                {item.icon}\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"aria-expanded:bg-muted\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare2\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"Trash2Icon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n            />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-16/components/nav-secondary.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-sera/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild size=\"sm\">\n                <a href={item.url}>\n                  {item.icon}\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-16/components/nav-user.tsx",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto size-4\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BadgeCheckIcon\"\n                  tabler=\"IconRosetteDiscountCheck\"\n                  hugeicons=\"CheckmarkBadgeIcon\"\n                  phosphor=\"CheckCircleIcon\"\n                  remixicon=\"RiCheckboxCircleLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconBell\"\n                  hugeicons=\"NotificationIcon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotificationLine\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-16/components/search-form.tsx",
+      "content": "\"use client\"\n\nimport { Label } from \"@/registry/radix-sera/ui/label\"\nimport { SidebarInput } from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SearchForm({ ...props }: React.ComponentProps<\"form\">) {\n  return (\n    <form {...props}>\n      <div className=\"relative\">\n        <Label htmlFor=\"search\" className=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Type to search...\"\n          className=\"h-8 pl-7\"\n        />\n        <IconPlaceholder\n          lucide=\"SearchIcon\"\n          tabler=\"IconSearch\"\n          hugeicons=\"SearchIcon\"\n          phosphor=\"MagnifyingGlassIcon\"\n          remixicon=\"RiSearchLine\"\n          className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n        />\n      </div>\n    </form>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/radix-sera/blocks/sidebar-16/components/site-header.tsx",
+      "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-sera/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-sera/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"sticky top-0 z-50 flex w-full items-center border-b bg-background\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <IconPlaceholder\n            lucide=\"PanelLeftIcon\"\n            tabler=\"IconLayoutSidebar\"\n            hugeicons=\"SidebarLeftIcon\"\n            phosphor=\"SidebarIcon\"\n            remixicon=\"RiLayoutLeftLine\"\n          />\n        </Button>\n        <Separator\n          orientation=\"vertical\"\n          className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n        />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-example.json b/apps/v4/public/r/styles/radix-sera/sidebar-example.json
new file mode 100644
index 0000000000..ddd4b3e493
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sidebar-example.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-example",
+  "title": "Sidebar",
+  "registryDependencies": [
+    "button",
+    "dropdown-menu",
+    "item",
+    "label",
+    "sidebar",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/sidebar-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-sera/ui/item\"\nimport { Label } from \"@/registry/radix-sera/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Item className=\"p-0\" size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                        <ItemDescription>v{selectedVersion}</ItemDescription>\n                      </ItemContent>\n                      <ItemActions>\n                        <IconPlaceholder\n                          lucide=\"ChevronsUpDownIcon\"\n                          tabler=\"IconSelector\"\n                          hugeicons=\"UnfoldMoreIcon\"\n                          phosphor=\"CaretUpDownIcon\"\n                          remixicon=\"RiArrowUpDownLine\"\n                        />\n                      </ItemActions>\n                    </Item>\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    {data.versions.map((version) => (\n                      <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                      >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                          <IconPlaceholder\n                            lucide=\"CheckIcon\"\n                            tabler=\"IconCheck\"\n                            hugeicons=\"Tick02Icon\"\n                            phosphor=\"CheckIcon\"\n                            remixicon=\"RiCheckLine\"\n                            className=\"ml-auto\"\n                          />\n                        )}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton asChild isActive={subItem.isActive}>\n                        <a href={subItem.url}>{subItem.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-floating-example.json b/apps/v4/public/r/styles/radix-sera/sidebar-floating-example.json
new file mode 100644
index 0000000000..7d71bb4a29
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sidebar-floating-example.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-floating-example",
+  "title": "Sidebar (Floating)",
+  "registryDependencies": [
+    "button",
+    "card",
+    "dropdown-menu",
+    "field",
+    "item",
+    "sidebar",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/sidebar-floating-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-sera/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport { Field } from \"@/registry/radix-sera/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-sera/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v1.0.0</ItemDescription>\n                    </ItemContent>\n                  </Item>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title}{\" \"}\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                          className=\"ml-auto\"\n                        />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem asChild key={subItem.title}>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-icon-example.json b/apps/v4/public/r/styles/radix-sera/sidebar-icon-example.json
new file mode 100644
index 0000000000..19ff601261
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sidebar-icon-example.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-icon-example",
+  "title": "Sidebar (Icon)",
+  "registryDependencies": [
+    "avatar",
+    "button",
+    "collapsible",
+    "dropdown-menu",
+    "item",
+    "sidebar",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/sidebar-icon-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-sera/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-sera/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Button size=\"icon-sm\" asChild className=\"size-8\">\n                      <span>\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          viewBox=\"0 0 256 256\"\n                        >\n                          <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                          <line\n                            x1=\"208\"\n                            y1=\"128\"\n                            x2=\"128\"\n                            y2=\"208\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                          <line\n                            x1=\"192\"\n                            y1=\"40\"\n                            x2=\"40\"\n                            y2=\"192\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                        </svg>\n                      </span>\n                    </Button>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                      remixicon=\"RiArrowUpDownLine\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton tooltip={item.title} asChild>\n                      <CollapsibleTrigger>\n                        {item.icon}\n                        <span>{item.title}</span>\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          remixicon=\"RiArrowRightSLine\"\n                          className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                        />\n                      </CollapsibleTrigger>\n                    </SidebarMenuButton>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      {item.icon}\n                      {item.name}\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar>\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                      remixicon=\"RiArrowUpDownLine\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-inset-example.json b/apps/v4/public/r/styles/radix-sera/sidebar-inset-example.json
new file mode 100644
index 0000000000..5b576319b4
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sidebar-inset-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-inset-example",
+  "title": "Sidebar (Inset)",
+  "registryDependencies": [
+    "collapsible",
+    "sidebar",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/sidebar-inset-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-sera/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n            remixicon=\"RiHomeLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n            remixicon=\"RiShoppingBagLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n            remixicon=\"RiShoppingCartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n            remixicon=\"RiFileLine\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n            remixicon=\"RiUserLine\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n            remixicon=\"RiLifebuoyLine\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n            remixicon=\"RiSendPlaneLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton\n                      asChild\n                      tooltip={item.title}\n                      isActive={item.isActive}\n                    >\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <IconPlaceholder\n                              lucide=\"ChevronRightIcon\"\n                              tabler=\"IconChevronRight\"\n                              hugeicons=\"ArrowRight01Icon\"\n                              phosphor=\"CaretRightIcon\"\n                              remixicon=\"RiArrowRightSLine\"\n                            />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sidebar.json b/apps/v4/public/r/styles/radix-sera/sidebar.json
new file mode 100644
index 0000000000..4c2b6f5e29
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sidebar.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar",
+  "registryDependencies": [
+    "button",
+    "separator",
+    "sheet",
+    "tooltip",
+    "input",
+    "use-mobile",
+    "skeleton"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/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 { useIsMobile } from \"@/registry/radix-sera/hooks/use-mobile\"\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/radix-sera/ui/sheet\"\nimport { Skeleton } from \"@/registry/radix-sera/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-sera/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 flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar\",\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          \"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground\",\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=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>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 hidden text-sidebar-foreground 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          \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\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=\"flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border\"\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        \"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] hover:after:bg-sidebar-border 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        \"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar\",\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        \"relative flex w-full flex-1 flex-col 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\",\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(\n        \"h-8 w-full border-input bg-transparent shadow-none\",\n        className\n      )}\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(\"flex flex-col gap-2 p-2 [--radius:0]\", 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(\"flex flex-col gap-2 p-2\", 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(\"mx-2 w-auto bg-sidebar-border\", 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 flex min-h-0 flex-1 flex-col gap-2 overflow-auto [--radius:0] 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(\"relative flex w-full min-w-0 flex-col p-2\", className)}\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        \"flex h-8 shrink-0 items-center rounded-none px-3 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden 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 [&>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        \"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>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(\"w-full text-sm\", 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(\"flex w-full min-w-0 flex-col gap-0.5\", 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  \"peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-none px-3 py-2 text-left text-sm ring-sidebar-ring outline-hidden 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! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground 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-14 px-3 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        \"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground 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 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0\",\n        showOnHover &&\n          \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded: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        \"pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-none px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground 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 peer-data-active/menu-button:text-sidebar-accent-foreground\",\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(\"flex h-8 items-center gap-2 rounded-none px-2\", 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(\n        \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden\",\n        className\n      )}\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        \"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-none px-3 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\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"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/sidebar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sidebar-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/signup-01.json b/apps/v4/public/r/styles/radix-sera/signup-01.json
new file mode 100644
index 0000000000..4d3f091d04
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/signup-01.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "signup-01",
+  "title": "Signup 01",
+  "description": "A simple signup form.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/signup-01/page.tsx",
+      "content": "import { SignupForm } from \"@/registry/radix-sera/blocks/signup-01/components/signup-form\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/signup/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/signup-01/components/signup-form.tsx",
+      "content": "import { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-sera/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\n\nexport function SignupForm({ ...props }: React.ComponentProps<typeof Card>) {\n  return (\n    <Card {...props}>\n      <CardHeader>\n        <CardTitle>Create an account</CardTitle>\n        <CardDescription>\n          Enter your information below to create your account\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n              <Input id=\"name\" type=\"text\" placeholder=\"John Doe\" required />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n              <Input\n                id=\"email\"\n                type=\"email\"\n                placeholder=\"m@example.com\"\n                required\n              />\n              <FieldDescription>\n                We&apos;ll use this to contact you. We will not share your email\n                with anyone else.\n              </FieldDescription>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n              <Input id=\"password\" type=\"password\" required />\n              <FieldDescription>\n                Must be at least 8 characters long.\n              </FieldDescription>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"confirm-password\">\n                Confirm Password\n              </FieldLabel>\n              <Input id=\"confirm-password\" type=\"password\" required />\n              <FieldDescription>Please confirm your password.</FieldDescription>\n            </Field>\n            <FieldGroup>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Sign up with Google\n                </Button>\n                <FieldDescription className=\"px-6 text-center\">\n                  Already have an account? <a href=\"#\">Sign in</a>\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </FieldGroup>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "signup"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/signup-02.json b/apps/v4/public/r/styles/radix-sera/signup-02.json
new file mode 100644
index 0000000000..cea7424995
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/signup-02.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "signup-02",
+  "title": "Signup 02",
+  "description": "A two column signup page with a cover image.",
+  "registryDependencies": [
+    "button",
+    "input",
+    "label",
+    "field"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/signup-02/page.tsx",
+      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/radix-sera/blocks/signup-02/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <SignupForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/signup/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/signup-02/components/signup-form.tsx",
+      "content": "import { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Create your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Fill in the form below to create your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input\n            id=\"name\"\n            type=\"text\"\n            placeholder=\"John Doe\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            We&apos;ll use this to contact you. We will not share your email\n            with anyone else.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            Must be at least 8 characters long.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <Input\n            id=\"confirm-password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>Please confirm your password.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">Create Account</Button>\n        </Field>\n        <FieldSeparator>Or continue with</FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Sign up with GitHub\n          </Button>\n          <FieldDescription className=\"px-6 text-center\">\n            Already have an account? <a href=\"#\">Sign in</a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "signup"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/signup-03.json b/apps/v4/public/r/styles/radix-sera/signup-03.json
new file mode 100644
index 0000000000..8316332620
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/signup-03.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "signup-03",
+  "title": "Signup 03",
+  "description": "A signup page with a muted background color.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "field"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/signup-03/page.tsx",
+      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/radix-sera/blocks/signup-03/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/signup/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/signup-03/components/signup-form.tsx",
+      "content": "import { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-sera/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card>\n        <CardHeader className=\"text-center\">\n          <CardTitle className=\"text-xl\">Create your account</CardTitle>\n          <CardDescription>\n            Enter your email below to create your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n                <Input id=\"name\" type=\"text\" placeholder=\"John Doe\" required />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n                <FieldDescription className=\"text-center\">\n                  Already have an account? <a href=\"#\">Sign in</a>\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "signup"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/signup-04.json b/apps/v4/public/r/styles/radix-sera/signup-04.json
new file mode 100644
index 0000000000..ba9d964452
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/signup-04.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "signup-04",
+  "title": "Signup 04",
+  "description": "A signup page with form and image.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label",
+    "field"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/signup-04/page.tsx",
+      "content": "import { SignupForm } from \"@/registry/radix-sera/blocks/signup-04/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/signup/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/signup-04/components/signup-form.tsx",
+      "content": "import { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-sera/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Create your account</h1>\n                <p className=\"text-sm text-balance text-muted-foreground\">\n                  Enter your email below to create your account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n                <FieldDescription>\n                  We&apos;ll use this to contact you. We will not share your\n                  email with anyone else.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "signup"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/signup-05.json b/apps/v4/public/r/styles/radix-sera/signup-05.json
new file mode 100644
index 0000000000..9b15db03b0
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/signup-05.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "signup-05",
+  "title": "Signup 05",
+  "description": "A simple signup form with social providers.",
+  "registryDependencies": [
+    "button",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/blocks/signup-05/page.tsx",
+      "content": "import { SignupForm } from \"@/registry/radix-sera/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/signup/page.tsx"
+    },
+    {
+      "path": "registry/radix-sera/blocks/signup-05/components/signup-form.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <FieldGroup>\n          <div className=\"flex flex-col items-center gap-2 text-center\">\n            <a\n              href=\"#\"\n              className=\"flex flex-col items-center gap-2 font-medium\"\n            >\n              <div className=\"flex size-8 items-center justify-center rounded-md\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-6\"\n                />\n              </div>\n              <span className=\"sr-only\">Acme Inc.</span>\n            </a>\n            <h1 className=\"text-xl font-bold\">Welcome to Acme Inc.</h1>\n            <FieldDescription>\n              Already have an account? <a href=\"#\">Sign in</a>\n            </FieldDescription>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </Field>\n          <Field>\n            <Button type=\"submit\">Create Account</Button>\n          </Field>\n          <FieldSeparator>Or</FieldSeparator>\n          <Field className=\"grid gap-4 sm:grid-cols-2\">\n            <Button variant=\"outline\" type=\"button\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              Continue with Apple\n            </Button>\n            <Button variant=\"outline\" type=\"button\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              Continue with Google\n            </Button>\n          </Field>\n        </FieldGroup>\n      </form>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "categories": [
+    "authentication",
+    "signup"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/skeleton-example.json b/apps/v4/public/r/styles/radix-sera/skeleton-example.json
new file mode 100644
index 0000000000..96f9d5d20d
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/skeleton-example.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skeleton-example",
+  "title": "Skeleton",
+  "registryDependencies": [
+    "skeleton",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/skeleton-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Card, CardContent, CardHeader } from \"@/registry/radix-sera/ui/card\"\nimport { Skeleton } from \"@/registry/radix-sera/ui/skeleton\"\n\nexport default function SkeletonExample() {\n  return (\n    <ExampleWrapper>\n      <SkeletonAvatar />\n      <SkeletonCard />\n      <SkeletonText />\n      <SkeletonForm />\n      <SkeletonTable />\n    </ExampleWrapper>\n  )\n}\n\nfunction SkeletonAvatar() {\n  return (\n    <Example title=\"Avatar\">\n      <div className=\"flex w-full items-center gap-4\">\n        <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n        <div className=\"grid gap-2\">\n          <Skeleton className=\"h-4 w-[150px]\" />\n          <Skeleton className=\"h-4 w-[100px]\" />\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SkeletonCard() {\n  return (\n    <Example title=\"Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <Skeleton className=\"h-4 w-2/3\" />\n          <Skeleton className=\"h-4 w-1/2\" />\n        </CardHeader>\n        <CardContent>\n          <Skeleton className=\"aspect-square w-full\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction SkeletonText() {\n  return (\n    <Example title=\"Text\">\n      <div className=\"flex w-full flex-col gap-2\">\n        <Skeleton className=\"h-4 w-full\" />\n        <Skeleton className=\"h-4 w-full\" />\n        <Skeleton className=\"h-4 w-3/4\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SkeletonForm() {\n  return (\n    <Example title=\"Form\">\n      <div className=\"flex w-full flex-col gap-7\">\n        <div className=\"flex flex-col gap-3\">\n          <Skeleton className=\"h-4 w-20\" />\n          <Skeleton className=\"h-10 w-full\" />\n        </div>\n        <div className=\"flex flex-col gap-3\">\n          <Skeleton className=\"h-4 w-24\" />\n          <Skeleton className=\"h-10 w-full\" />\n        </div>\n        <Skeleton className=\"h-9 w-24\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SkeletonTable() {\n  return (\n    <Example title=\"Table\">\n      <div className=\"flex w-full flex-col gap-2\">\n        <div className=\"flex gap-4\">\n          <Skeleton className=\"h-4 flex-1\" />\n          <Skeleton className=\"h-4 w-24\" />\n          <Skeleton className=\"h-4 w-20\" />\n        </div>\n        <div className=\"flex gap-4\">\n          <Skeleton className=\"h-4 flex-1\" />\n          <Skeleton className=\"h-4 w-24\" />\n          <Skeleton className=\"h-4 w-20\" />\n        </div>\n        <div className=\"flex gap-4\">\n          <Skeleton className=\"h-4 flex-1\" />\n          <Skeleton className=\"h-4 w-24\" />\n          <Skeleton className=\"h-4 w-20\" />\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/skeleton.json b/apps/v4/public/r/styles/radix-sera/skeleton.json
new file mode 100644
index 0000000000..60006698c1
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/skeleton.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skeleton",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/skeleton.tsx",
+      "content": "import { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"animate-pulse bg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/skeleton",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/skeleton-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/slider-example.json b/apps/v4/public/r/styles/radix-sera/slider-example.json
new file mode 100644
index 0000000000..97fd1555f0
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/slider-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "slider-example",
+  "title": "Slider",
+  "registryDependencies": [
+    "label",
+    "slider",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/slider-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Label } from \"@/registry/radix-sera/ui/label\"\nimport { Slider } from \"@/registry/radix-sera/ui/slider\"\n\nexport default function SliderExample() {\n  return (\n    <ExampleWrapper>\n      <SliderBasic />\n      <SliderRange />\n      <SliderMultiple />\n      <SliderVertical />\n      <SliderControlled />\n      <SliderDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction SliderBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Slider defaultValue={[50]} max={100} step={1} />\n    </Example>\n  )\n}\n\nfunction SliderRange() {\n  return (\n    <Example title=\"Range\">\n      <Slider defaultValue={[25, 50]} max={100} step={5} />\n    </Example>\n  )\n}\n\nfunction SliderMultiple() {\n  return (\n    <Example title=\"Multiple Thumbs\">\n      <Slider defaultValue={[10, 20, 70]} max={100} step={10} />\n    </Example>\n  )\n}\n\nfunction SliderVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex items-center gap-6\">\n        <Slider\n          defaultValue={[50]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n        <Slider\n          defaultValue={[25]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderControlled() {\n  const [value, setValue] = React.useState([0.3, 0.7])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"grid w-full gap-3\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <Label htmlFor=\"slider-demo-temperature\">Temperature</Label>\n          <span className=\"text-sm text-muted-foreground\">\n            {value.join(\", \")}\n          </span>\n        </div>\n        <Slider\n          id=\"slider-demo-temperature\"\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={1}\n          step={0.1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Slider defaultValue={[50]} max={100} step={1} disabled />\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/slider.json b/apps/v4/public/r/styles/radix-sera/slider.json
new file mode 100644
index 0000000000..1bbf18d1a3
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/slider.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "slider",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/slider.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        \"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className=\"relative grow overflow-hidden bg-input/50 data-horizontal:h-0.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-0.5\"\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className=\"absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full\"\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className=\"block size-3 shrink-0 border-none bg-primary transition-colors select-none hover:ring-2 hover:ring-ring/30 focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/slider",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/slider-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/slider.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sonner-example.json b/apps/v4/public/r/styles/radix-sera/sonner-example.json
new file mode 100644
index 0000000000..90e8cb58c7
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sonner-example.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sonner-example",
+  "title": "Sonner",
+  "registryDependencies": [
+    "sonner",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/sonner-example.tsx",
+      "content": "\"use client\"\n\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\n\nexport default function SonnerExample() {\n  return (\n    <ExampleWrapper>\n      <SonnerBasic />\n      <SonnerWithDescription />\n    </ExampleWrapper>\n  )\n}\n\nfunction SonnerBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center justify-center\">\n      <Button\n        onClick={() => toast(\"Event has been created\")}\n        variant=\"outline\"\n        className=\"w-fit\"\n      >\n        Show Toast\n      </Button>\n    </Example>\n  )\n}\n\nfunction SonnerWithDescription() {\n  return (\n    <Example title=\"With Description\" className=\"items-center justify-center\">\n      <Button\n        onClick={() =>\n          toast(\"Event has been created\", {\n            description: \"Monday, January 3rd at 6:00pm\",\n          })\n        }\n        variant=\"outline\"\n        className=\"w-fit\"\n      >\n        Show Toast\n      </Button>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/sonner.json b/apps/v4/public/r/styles/radix-sera/sonner.json
new file mode 100644
index 0000000000..2bcc149995
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/sonner.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sonner",
+  "dependencies": [
+    "sonner",
+    "next-themes"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/sonner.tsx",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n            className=\"size-4\"\n          />\n        ),\n        info: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            phosphor=\"InfoIcon\"\n            remixicon=\"RiInformationLine\"\n            className=\"size-4\"\n          />\n        ),\n        warning: (\n          <IconPlaceholder\n            lucide=\"TriangleAlertIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            phosphor=\"WarningIcon\"\n            remixicon=\"RiErrorWarningLine\"\n            className=\"size-4\"\n          />\n        ),\n        error: (\n          <IconPlaceholder\n            lucide=\"OctagonXIcon\"\n            tabler=\"IconAlertOctagon\"\n            hugeicons=\"MultiplicationSignCircleIcon\"\n            phosphor=\"XCircleIcon\"\n            remixicon=\"RiCloseCircleLine\"\n            className=\"size-4\"\n          />\n        ),\n        loading: (\n          <IconPlaceholder\n            lucide=\"Loader2Icon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoaderLine\"\n            className=\"size-4 animate-spin\"\n          />\n        ),\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/sonner",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sonner-example.tsx",
+      "api": "https://sonner.emilkowal.ski"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/spinner-example.json b/apps/v4/public/r/styles/radix-sera/spinner-example.json
new file mode 100644
index 0000000000..b9944912a6
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/spinner-example.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "spinner-example",
+  "title": "Spinner",
+  "registryDependencies": [
+    "badge",
+    "button",
+    "empty",
+    "field",
+    "input-group",
+    "spinner",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/spinner-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Badge } from \"@/registry/radix-sera/ui/badge\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/radix-sera/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/radix-sera/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-sera/ui/input-group\"\nimport { Spinner } from \"@/registry/radix-sera/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n  return (\n    <ExampleWrapper>\n      <SpinnerBasic />\n      <SpinnerInButtons />\n      <SpinnerInBadges />\n      <SpinnerInInputGroup />\n      <SpinnerInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction SpinnerBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-6\">\n        <Spinner />\n        <Spinner className=\"size-6\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInButtons() {\n  return (\n    <Example title=\"In Buttons\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Button>\n          <Spinner data-icon=\"inline-start\" /> Submit\n        </Button>\n        <Button disabled>\n          <Spinner data-icon=\"inline-start\" /> Disabled\n        </Button>\n        <Button variant=\"outline\" disabled>\n          <Spinner data-icon=\"inline-start\" /> Outline\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" disabled>\n          <Spinner data-icon=\"inline-start\" />\n          <span className=\"sr-only\">Loading...</span>\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInBadges() {\n  return (\n    <Example title=\"In Badges\" className=\"items-center justify-center\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInInputGroup() {\n  return (\n    <Example title=\"In Input Group\">\n      <Field>\n        <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n        <InputGroup>\n          <InputGroupInput id=\"input-group-spinner\" />\n          <InputGroupAddon>\n            <Spinner />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SpinnerInEmpty() {\n  return (\n    <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n      <Empty className=\"min-h-[300px]\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight02Icon\"\n                phosphor=\"ArrowRightIcon\"\n                remixicon=\"RiArrowRightLine\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/spinner.json b/apps/v4/public/r/styles/radix-sera/spinner.json
new file mode 100644
index 0000000000..29dbac49d1
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/spinner.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "spinner",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/spinner.tsx",
+      "content": "import { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <IconPlaceholder\n      lucide=\"Loader2Icon\"\n      tabler=\"IconLoader\"\n      hugeicons=\"Loading03Icon\"\n      phosphor=\"SpinnerIcon\"\n      remixicon=\"RiLoaderLine\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/spinner",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/spinner-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/style.json b/apps/v4/public/r/styles/radix-sera/style.json
new file mode 100644
index 0000000000..9d8bb6576c
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/style.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "style",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "radix-ui"
+  ],
+  "devDependencies": [
+    "tw-animate-css",
+    "shadcn"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {},
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@import \"shadcn/tailwind.css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  },
+  "type": "registry:style"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/switch-example.json b/apps/v4/public/r/styles/radix-sera/switch-example.json
new file mode 100644
index 0000000000..b3a55244c2
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/switch-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "switch-example",
+  "title": "Switch",
+  "registryDependencies": [
+    "field",
+    "label",
+    "switch",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/switch-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Label } from \"@/registry/radix-sera/ui/label\"\nimport { Switch } from \"@/registry/radix-sera/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/switch.json b/apps/v4/public/r/styles/radix-sera/switch.json
new file mode 100644
index 0000000000..55f41c5c07
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/switch.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "switch",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/switch.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"peer group/switch relative inline-flex shrink-0 items-center rounded-none border transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-[size=default]:h-4.5 data-[size=default]:w-8.25 data-[size=sm]:h-3.5 data-[size=sm]:w-6.25 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-unchecked:border-input/50 data-unchecked:bg-input data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"pointer-events-none block bg-background ring-0 transition-transform group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-2.5 data-checked:translate-x-[calc(100%+2px)] dark:data-checked:bg-primary-foreground data-unchecked:translate-x-0.25 dark:data-unchecked:bg-foreground\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/switch",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/switch-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/switch.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/table-example.json b/apps/v4/public/r/styles/radix-sera/table-example.json
new file mode 100644
index 0000000000..5232e12729
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/table-example.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "table-example",
+  "title": "Table",
+  "registryDependencies": [
+    "button",
+    "dropdown-menu",
+    "input",
+    "select",
+    "table",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/table-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-sera/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/radix-sera/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableExample() {\n  return (\n    <ExampleWrapper>\n      <TableBasic />\n      <TableWithFooter />\n      <TableSimple />\n      <TableWithBadges />\n      <TableWithActions />\n      <TableWithSelect />\n      <TableWithInput />\n    </ExampleWrapper>\n  )\n}\n\nfunction TableBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithFooter() {\n  return (\n    <Example title=\"With Footer\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead className=\"text-right\">Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Sarah Chen</TableCell>\n            <TableCell>sarah.chen@acme.com</TableCell>\n            <TableCell className=\"text-right\">Admin</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Marc Rodriguez</TableCell>\n            <TableCell>marcus.rodriguez@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Emily Watson</TableCell>\n            <TableCell>emily.watson@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithBadges() {\n  return (\n    <Example title=\"With Badges\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Priority</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400\">\n                Completed\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400\">\n                High\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400\">\n                In Progress\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Medium\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Pending\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Low\n              </span>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithActions() {\n  return (\n    <Example title=\"With Actions\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Price</TableHead>\n            <TableHead className=\"text-right\">Actions</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>$29.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                      remixicon=\"RiMoreLine\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>$129.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                      remixicon=\"RiMoreLine\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>$49.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                      remixicon=\"RiMoreLine\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Assignee</TableHead>\n            <TableHead>Status</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <Select defaultValue=\"sarah\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>In Progress</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <Select defaultValue=\"marcus\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>Pending</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <Select defaultValue=\"emily\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>Not Started</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Quantity</TableHead>\n            <TableHead>Price</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$29.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"2\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$129.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$49.99</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/table.json b/apps/v4/public/r/styles/radix-sera/table.json
new file mode 100644
index 0000000000..0c55712b0f
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/table.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "table",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/table.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-12 px-3 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/table",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/table-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/tabs-example.json b/apps/v4/public/r/styles/radix-sera/tabs-example.json
new file mode 100644
index 0000000000..30609d0162
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/tabs-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tabs-example",
+  "title": "Tabs",
+  "registryDependencies": [
+    "button",
+    "dropdown-menu",
+    "tabs",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/tabs-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-sera/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n              data-icon=\"inline-start\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n              data-icon=\"inline-start\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/tabs.json b/apps/v4/public/r/styles/radix-sera/tabs.json
new file mode 100644
index 0000000000..7226858ee2
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/tabs.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tabs",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/tabs.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"group/tabs-list inline-flex w-fit items-center justify-center p-1 text-muted-foreground group-data-horizontal/tabs:h-10 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> &\n  VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-4 group-data-vertical/tabs:py-2 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground\",\n        \"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-sm outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/tabs",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tabs-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/tabs.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/textarea-example.json b/apps/v4/public/r/styles/radix-sera/textarea-example.json
new file mode 100644
index 0000000000..7f3988b4a9
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/textarea-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea-example",
+  "title": "Textarea",
+  "registryDependencies": [
+    "field",
+    "textarea",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/textarea-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Textarea } from \"@/registry/radix-sera/ui/textarea\"\n\nexport default function TextareaExample() {\n  return (\n    <ExampleWrapper>\n      <TextareaBasic />\n      <TextareaInvalid />\n      <TextareaWithLabel />\n      <TextareaWithDescription />\n      <TextareaDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction TextareaBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Textarea placeholder=\"Type your message here.\" />\n    </Example>\n  )\n}\n\nfunction TextareaInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Textarea placeholder=\"Type your message here.\" aria-invalid=\"true\" />\n    </Example>\n  )\n}\n\nfunction TextareaWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"textarea-demo-message\">Message</FieldLabel>\n        <Textarea\n          id=\"textarea-demo-message\"\n          placeholder=\"Type your message here.\"\n          rows={6}\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction TextareaWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field>\n        <FieldLabel htmlFor=\"textarea-demo-message-2\">Message</FieldLabel>\n        <Textarea\n          id=\"textarea-demo-message-2\"\n          placeholder=\"Type your message here.\"\n          rows={6}\n        />\n        <FieldDescription>\n          Type your message and press enter to send.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction TextareaDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"textarea-demo-disabled\">Message</FieldLabel>\n        <Textarea\n          id=\"textarea-demo-disabled\"\n          placeholder=\"Type your message here.\"\n          disabled\n        />\n      </Field>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/textarea.json b/apps/v4/public/r/styles/radix-sera/textarea.json
new file mode 100644
index 0000000000..df9bcf5a2e
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/textarea.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/textarea.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"flex field-sizing-content min-h-16 w-full resize-none rounded-none border border-transparent border-b-input bg-transparent px-0 py-3 text-base transition-[color,border-color] outline-none placeholder:text-muted-foreground focus-visible:border-b-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive md:text-sm dark:aria-invalid:border-b-destructive/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/textarea",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/textarea-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/toggle-example.json b/apps/v4/public/r/styles/radix-sera/toggle-example.json
new file mode 100644
index 0000000000..26f631efaf
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/toggle-example.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-example",
+  "title": "Toggle",
+  "registryDependencies": [
+    "toggle",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/toggle-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport { Toggle } from \"@/registry/radix-sera/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n            data-icon=\"inline-start\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n            data-icon=\"inline-start\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n              remixicon=\"RiBold\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n              remixicon=\"RiBold\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n              remixicon=\"RiItalic\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n              remixicon=\"RiItalic\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n              remixicon=\"RiUnderline\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n              remixicon=\"RiUnderline\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n              phosphor=\"TextBIcon\"\n              remixicon=\"RiBold\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n              remixicon=\"RiBold\"\n              data-icon=\"inline-start\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n              phosphor=\"TextItalicIcon\"\n              remixicon=\"RiItalic\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n              remixicon=\"RiItalic\"\n              data-icon=\"inline-start\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n              remixicon=\"RiUnderline\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n              remixicon=\"RiUnderline\"\n              data-icon=\"inline-start\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n            data-icon=\"inline-start\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/toggle-group-example.json b/apps/v4/public/r/styles/radix-sera/toggle-group-example.json
new file mode 100644
index 0000000000..4af5e50670
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/toggle-group-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group-example",
+  "title": "Toggle Group",
+  "registryDependencies": [
+    "input",
+    "select",
+    "toggle-group",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/toggle-group-example.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-sera/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/radix-sera/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n      <ToggleGroupFontWeightSelector />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup type=\"multiple\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" type=\"single\" defaultValue=\"all\">\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" type=\"multiple\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup\n          type=\"single\"\n          size=\"sm\"\n          defaultValue=\"top\"\n          variant=\"outline\"\n        >\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup type=\"single\" defaultValue=\"top\" variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        type=\"single\"\n        size=\"sm\"\n        defaultValue=\"top\"\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup type=\"multiple\" variant=\"outline\" spacing={1} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:stroke-foregfill-foreground aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n            remixicon=\"RiStarLine\"\n            data-icon=\"inline-start\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n            data-icon=\"inline-start\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n            data-icon=\"inline-start\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup type=\"single\" defaultValue=\"all\" variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        type=\"single\"\n        defaultValue=\"today\"\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup\n        type=\"single\"\n        defaultValue=\"newest\"\n        variant=\"outline\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n            remixicon=\"RiArrowDownLine\"\n            data-icon=\"inline-start\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n            remixicon=\"RiArrowUpLine\"\n            data-icon=\"inline-start\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n            remixicon=\"RiLineChartLine\"\n            data-icon=\"inline-start\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select defaultValue=\"all\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"archived\">Archived</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup type=\"single\" defaultValue=\"grid\" variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup type=\"multiple\" orientation=\"vertical\" spacing={2}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        type=\"single\"\n        defaultValue=\"all\"\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup\n        variant=\"outline\"\n        type=\"multiple\"\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFontWeightSelector() {\n  const [fontWeight, setFontWeight] = React.useState(\"normal\")\n  return (\n    <Example title=\"Font Weight Selector\">\n      <Field>\n        <FieldLabel>Font Weight</FieldLabel>\n        <ToggleGroup\n          type=\"single\"\n          value={fontWeight}\n          onValueChange={(value) => setFontWeight(value)}\n          variant=\"outline\"\n          spacing={2}\n          size=\"lg\"\n        >\n          <ToggleGroupItem\n            value=\"light\"\n            aria-label=\"Light\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-light\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"normal\"\n            aria-label=\"Normal\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-normal\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"medium\"\n            aria-label=\"Medium\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-medium\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"bold\"\n            aria-label=\"Bold\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-bold\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use{\" \"}\n          <code className=\"rounded-md bg-muted px-1 py-0.5 font-mono\">\n            font-{fontWeight}\n          </code>{\" \"}\n          to set the font weight.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        type=\"single\"\n        size=\"sm\"\n        defaultValue=\"top\"\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/toggle-group.json b/apps/v4/public/r/styles/radix-sera/toggle-group.json
new file mode 100644
index 0000000000..93c7ffd1b1
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/toggle-group.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle-group",
+  "registryDependencies": [
+    "toggle"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/toggle-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type VariantProps } from \"class-variance-authority\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { toggleVariants } from \"@/registry/radix-sera/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[spacing=0]:data-[variant=outline]:rounded-none data-vertical:flex-col data-vertical:items-stretch\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-6 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-4 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-4 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-none group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-none data-[state=on]:bg-muted data-[state=on]:text-foreground group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/toggle-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-group-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/toggle-group.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/toggle.json b/apps/v4/public/r/styles/radix-sera/toggle.json
new file mode 100644
index 0000000000..ac65c71010
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/toggle.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/toggle.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Toggle as TogglePrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nconst toggleVariants = cva(\n  \"group/toggle inline-flex items-center justify-center gap-1.5 rounded-none text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border border-input bg-transparent hover:bg-muted\",\n      },\n      size: {\n        default:\n          \"h-10 min-w-10 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4\",\n        sm: \"h-9 min-w-9 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        lg: \"h-11 min-w-11 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/toggle",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/toggle.md"
+    }
+  },
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/tooltip-example.json b/apps/v4/public/r/styles/radix-sera/tooltip-example.json
new file mode 100644
index 0000000000..07a0955f8f
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/tooltip-example.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tooltip-example",
+  "title": "Tooltip",
+  "registryDependencies": [
+    "button",
+    "kbd",
+    "tooltip",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/examples/tooltip-example.tsx",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport { Kbd } from \"@/registry/radix-sera/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-sera/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"w-fit capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          Save Changes <Kbd>S</Kbd>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"w-fit text-sm text-primary underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/tooltip.json b/apps/v4/public/r/styles/radix-sera/tooltip.json
new file mode 100644
index 0000000000..b06bebc44b
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/tooltip.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tooltip",
+  "files": [
+    {
+      "path": "registry/radix-sera/ui/tooltip.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-none bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-none data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-none bg-foreground fill-foreground\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/tooltip",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tooltip-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/tooltip.md"
+    }
+  },
+  "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/use-mobile.json b/apps/v4/public/r/styles/radix-sera/use-mobile.json
new file mode 100644
index 0000000000..88f9d21bee
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/use-mobile.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "use-mobile",
+  "files": [
+    {
+      "path": "registry/radix-sera/hooks/use-mobile.ts",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
+      "type": "registry:hook"
+    }
+  ],
+  "type": "registry:hook"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-sera/utils.json b/apps/v4/public/r/styles/radix-sera/utils.json
new file mode 100644
index 0000000000..8c3ab123a7
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-sera/utils.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "utils",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-sera/lib/utils.ts",
+      "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib"
+    }
+  ],
+  "type": "registry:lib"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/accordion-example.json b/apps/v4/public/r/styles/radix-vega/accordion-example.json
index a4b2588e47..0bb7d98101 100644
--- a/apps/v4/public/r/styles/radix-vega/accordion-example.json
+++ b/apps/v4/public/r/styles/radix-vega/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/radix-vega/ui/accordion\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border\"\n          >\n            <AccordionTrigger className=\"font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0 style-luma:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg style-luma:rounded-xl\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"p-1 data-open:bg-muted/50\"\n          >\n            <AccordionTrigger className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/radix-vega/ui/accordion\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border\"\n          >\n            <AccordionTrigger className=\"font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0 style-luma:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg style-luma:rounded-xl style-sera:rounded-none\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"p-1 data-open:bg-muted/50 style-sera:p-0\"\n          >\n            <AccordionTrigger className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2 style-sera:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2 style-sera:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/alert-example.json b/apps/v4/public/r/styles/radix-vega/alert-example.json
index 44b3995090..0b5e8e7391 100644
--- a/apps/v4/public/r/styles/radix-vega/alert-example.json
+++ b/apps/v4/public/r/styles/radix-vega/alert-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/alert-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/radix-vega/ui/alert\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\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 { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n      <AlertExample5 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample5() {\n  return (\n    <Example title=\"Inside Card\">\n      <Card className=\"mx-auto w-full max-w-lg\">\n        <CardHeader>\n          <CardTitle>Create project</CardTitle>\n        </CardHeader>\n        <CardContent className=\"flex flex-col gap-4\">\n          <Alert>\n            <IconPlaceholder\n              lucide=\"CircleAlertIcon\"\n              tabler=\"IconExclamationCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"WarningCircleIcon\"\n              remixicon=\"RiErrorWarningLine\"\n            />\n            <AlertTitle>\n              You have reached the limit of 3 free projects.\n            </AlertTitle>\n            <AlertDescription>\n              Upgrade to Pro to create unlimited projects.\n            </AlertDescription>\n          </Alert>\n          <div className=\"flex flex-col gap-2\">\n            <Label htmlFor=\"project-name\">Name</Label>\n            <Input id=\"project-name\" placeholder=\"My project\" />\n          </div>\n          <div className=\"flex flex-col gap-2\">\n            <Label htmlFor=\"project-framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"project-framework\">\n                <SelectValue placeholder=\"Select a framework\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"next\">Next.js</SelectItem>\n                <SelectItem value=\"remix\">Remix</SelectItem>\n                <SelectItem value=\"astro\">Astro</SelectItem>\n                <SelectItem value=\"nuxt\">Nuxt</SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n          <Item variant=\"outline\">\n            <ItemMedia variant=\"image\" className=\"border\">\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Project Alpha</ItemTitle>\n              <ItemDescription>Created 2 days ago</ItemDescription>\n            </ItemContent>\n          </Item>\n        </CardContent>\n        <CardFooter>\n          <Button className=\"w-full\">Create project</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/radix-vega/ui/alert\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n      <AlertExample5 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\" className=\"style-sera:bg-transparent\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample5() {\n  return (\n    <Example title=\"Inside Card\" className=\"style-sera:bg-transparent\">\n      <Card className=\"mx-auto w-full max-w-lg\">\n        <CardHeader>\n          <CardTitle>Create project</CardTitle>\n          <CardDescription>\n            Fill in the form below to create a new project.\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex flex-col gap-4 style-sera:gap-8\">\n          <Alert>\n            <IconPlaceholder\n              lucide=\"CircleAlertIcon\"\n              tabler=\"IconExclamationCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"WarningCircleIcon\"\n              remixicon=\"RiErrorWarningLine\"\n            />\n            <AlertTitle>\n              You have reached the limit of 3 free projects.\n            </AlertTitle>\n            <AlertDescription>\n              Upgrade to Pro to create unlimited projects.\n            </AlertDescription>\n          </Alert>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\">Name</FieldLabel>\n              <Input id=\"project-name\" placeholder=\"My project\" />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"project-framework\">Framework</FieldLabel>\n              <Select>\n                <SelectTrigger id=\"project-framework\">\n                  <SelectValue placeholder=\"Select a framework\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"next\">Next.js</SelectItem>\n                    <SelectItem value=\"remix\">Remix</SelectItem>\n                    <SelectItem value=\"astro\">Astro</SelectItem>\n                    <SelectItem value=\"nuxt\">Nuxt</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </Field>\n          </FieldGroup>\n          <Item variant=\"outline\">\n            <ItemMedia variant=\"image\" className=\"border\">\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Project Alpha</ItemTitle>\n              <ItemDescription>Created 2 days ago</ItemDescription>\n            </ItemContent>\n          </Item>\n        </CardContent>\n        <CardFooter>\n          <Button className=\"w-full\">Create project</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/aspect-ratio-example.json b/apps/v4/public/r/styles/radix-vega/aspect-ratio-example.json
index 702b96801c..a1c6d397bb 100644
--- a/apps/v4/public/r/styles/radix-vega/aspect-ratio-example.json
+++ b/apps/v4/public/r/styles/radix-vega/aspect-ratio-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/aspect-ratio-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { AspectRatio } from \"@/registry/radix-vega/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={16 / 9}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio\n        ratio={1 / 1}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={9 / 16}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={21 / 9}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { AspectRatio } from \"@/registry/radix-vega/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={16 / 9}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio\n        ratio={1 / 1}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={9 / 16}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={21 / 9}\n        className=\"rounded-lg bg-muted style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-lyra:rounded-none style-luma:rounded-3xl style-sera:rounded-none\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/button-group.json b/apps/v4/public/r/styles/radix-vega/button-group.json
index c110c121f2..2664e61740 100644
--- a/apps/v4/public/r/styles/radix-vega/button-group.json
+++ b/apps/v4/public/r/styles/radix-vega/button-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/button-group.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md!\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md!\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-md border bg-muted px-2.5 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md!\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md!\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-md border bg-muted px-2.5 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/chart-example.json b/apps/v4/public/r/styles/radix-vega/chart-example.json
index b5aab275f0..94d6bfb7fa 100644
--- a/apps/v4/public/r/styles/radix-vega/chart-example.json
+++ b/apps/v4/public/r/styles/radix-vega/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-vega/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartPieExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={64}\n              outerRadius={94}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-vega/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartPieExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  const [params] = useDesignSystemSearchParams()\n  const isRounded = ![\"lyra\", \"sera\"].includes(params.style)\n\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                radius={isRounded ? 4 : 0}\n              />\n              <Bar\n                dataKey=\"mobile\"\n                fill=\"var(--color-mobile)\"\n                radius={isRounded ? 4 : 0}\n              />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={64}\n              outerRadius={94}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/combobox-example.json b/apps/v4/public/r/styles/radix-vega/combobox-example.json
index 40ddd08b45..60b972fe6a 100644
--- a/apps/v4/public/r/styles/radix-vega/combobox-example.json
+++ b/apps/v4/public/r/styles/radix-vega/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-vega/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/radix-vega/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} 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 {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"w-52 justify-between font-normal text-muted-foreground\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-vega/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/radix-vega/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} 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 {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"w-52 justify-between font-normal text-muted-foreground style-sera:hidden\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/demo.json b/apps/v4/public/r/styles/radix-vega/demo.json
index 06e5826fbb..d09cfecdd3 100644
--- a/apps/v4/public/r/styles/radix-vega/demo.json
+++ b/apps/v4/public/r/styles/radix-vega/demo.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-vega/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-vega/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport { Checkbox } from \"@/registry/radix-vega/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-vega/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-vega/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-vega/ui/slider\"\nimport { Switch } from \"@/registry/radix-vega/ui/switch\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-vega/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-vega/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport { Checkbox } from \"@/registry/radix-vega/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-vega/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-vega/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-vega/ui/slider\"\nimport { Switch } from \"@/registry/radix-vega/ui/switch\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/drawer-example.json b/apps/v4/public/r/styles/radix-vega/drawer-example.json
index ddc3af41f5..aed2e18f2e 100644
--- a/apps/v4/public/r/styles/radix-vega/drawer-example.json
+++ b/apps/v4/public/r/styles/radix-vega/drawer-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/drawer-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-vega/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\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          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-vega/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed style-sera:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed style-sera:leading-relaxed\"\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          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/dropdown-menu-example.json b/apps/v4/public/r/styles/radix-vega/dropdown-menu-example.json
index 50426b7674..9de0e239a0 100644
--- a/apps/v4/public/r/styles/radix-vega/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/radix-vega/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/dropdown-menu-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 {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\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 {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/example.json b/apps/v4/public/r/styles/radix-vega/example.json
index b485ae8a35..c57b2cd80b 100644
--- a/apps/v4/public/r/styles/radix-vega/example.json
+++ b/apps/v4/public/r/styles/radix-vega/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/radix-vega/components/example.tsx",
-      "content": "import { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground style-lyra:rounded-none style-sera:rounded-none *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/field.json b/apps/v4/public/r/styles/radix-vega/field.json
index 184fdf0ab0..0aff2f6df1 100644
--- a/apps/v4/public/r/styles/radix-vega/field.json
+++ b/apps/v4/public/r/styles/radix-vega/field.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Label } from \"@/registry/radix-vega/ui/label\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Label } from \"@/registry/radix-vega/ui/label\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/font-eb-garamond.json b/apps/v4/public/r/styles/radix-vega/font-eb-garamond.json
new file mode 100644
index 0000000000..e3de403ba0
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-vega/font-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-eb-garamond",
+  "title": "EB Garamond",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/font-heading-eb-garamond.json b/apps/v4/public/r/styles/radix-vega/font-heading-eb-garamond.json
new file mode 100644
index 0000000000..2f7d94b7e5
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-vega/font-heading-eb-garamond.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-eb-garamond",
+  "title": "EB Garamond (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/hover-card-example.json b/apps/v4/public/r/styles/radix-vega/hover-card-example.json
index 6e06a6a313..0fc4eb5fee 100644
--- a/apps/v4/public/r/styles/radix-vega/hover-card-example.json
+++ b/apps/v4/public/r/styles/radix-vega/hover-card-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/hover-card-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  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/radix-vega/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side} openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent side={side} className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side} side of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Hover me\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\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  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/radix-vega/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side} openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent side={side} className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2 style-sera:gap-2\">\n                <h4 className=\"font-medium style-sera:font-heading style-sera:font-semibold style-sera:tracking-wide\">\n                  Hover Card\n                </h4>\n                <p className=\"style-sera:leading-relaxed\">\n                  This hover card appears on the {side} side of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Hover me\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2 style-sera:gap-2\">\n                <h4 className=\"font-medium style-sera:font-heading style-sera:font-semibold style-sera:tracking-wide\">\n                  Hover Card\n                </h4>\n                <p className=\"style-sera:leading-relaxed\">\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/input-otp-example.json b/apps/v4/public/r/styles/radix-vega/input-otp-example.json
index 10e837144c..f7b538d64a 100644
--- a/apps/v4/public/r/styles/radix-vega/input-otp-example.json
+++ b/apps/v4/public/r/styles/radix-vega/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-vega/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-vega/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" 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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\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    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-sm text-muted-foreground\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"underline underline-offset-4 transition-colors hover:text-primary\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-vega/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-vega/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" 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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\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    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\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      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12 style-sera:*:data-[slot=input-otp-slot]:h-14 style-sera:*:data-[slot=input-otp-slot]:w-10\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11 style-luma:*:data-[slot=input-otp-slot]:h-16 style-luma:*:data-[slot=input-otp-slot]:w-12 style-sera:*:data-[slot=input-otp-slot]:h-14 style-sera:*:data-[slot=input-otp-slot]:w-10\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-sm text-muted-foreground\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"underline underline-offset-4 transition-colors hover:text-primary\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/navigation-menu-example.json b/apps/v4/public/r/styles/radix-vega/navigation-menu-example.json
index c2af7cb1bc..6eb022c293 100644
--- a/apps/v4/public/r/styles/radix-vega/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/radix-vega/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/radix-vega/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"line-clamp-2 text-muted-foreground\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/radix-vega/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n                          Components\n                        </div>\n                        <div className=\"text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n                          Documentation\n                        </div>\n                        <div className=\"text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n                          Blog\n                        </div>\n                        <div className=\"text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm\">\n            <div className=\"leading-none font-medium style-sera:font-heading style-sera:tracking-wide style-sera:uppercase\">\n              {title}\n            </div>\n            <div className=\"line-clamp-2 text-muted-foreground style-sera:mt-0.5 style-sera:leading-relaxed\">\n              {children}\n            </div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/registry.json b/apps/v4/public/r/styles/radix-vega/registry.json
index bc845cd323..2170140bd0 100644
--- a/apps/v4/public/r/styles/radix-vega/registry.json
+++ b/apps/v4/public/r/styles/radix-vega/registry.json
@@ -3174,6 +3174,19 @@
         "dependency": "@fontsource-variable/playfair-display"
       }
     },
+    {
+      "name": "font-eb-garamond",
+      "title": "EB Garamond",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
+    },
     {
       "name": "font-heading-geist",
       "title": "Geist (Heading)",
@@ -3485,6 +3498,19 @@
         "subsets": ["latin"],
         "dependency": "@fontsource-variable/playfair-display"
       }
+    },
+    {
+      "name": "font-heading-eb-garamond",
+      "title": "EB Garamond (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
     }
   ]
 }
diff --git a/apps/v4/public/r/styles/radix-vega/resizable-example.json b/apps/v4/public/r/styles/radix-vega/resizable-example.json
index d56799f88d..3c8d6bf778 100644
--- a/apps/v4/public/r/styles/radix-vega/resizable-example.json
+++ b/apps/v4/public/r/styles/radix-vega/resizable-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/resizable-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/radix-vega/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/radix-vega/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/scroll-area-example.json b/apps/v4/public/r/styles/radix-vega/scroll-area-example.json
index 60e9272b89..17dd6b1210 100644
--- a/apps/v4/public/r/styles/radix-vega/scroll-area-example.json
+++ b/apps/v4/public/r/styles/radix-vega/scroll-area-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/scroll-area-example.tsx",
-      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/radix-vega/ui/scroll-area\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 overflow-hidden rounded-md border style-maia:rounded-2xl style-luma:rounded-2xl\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 overflow-hidden rounded-md border p-4 **:data-[slot=scroll-area-viewport]:rounded-md style-maia:rounded-2xl style-luma:rounded-2xl\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-3/4 h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n                Photo by{\" \"}\n                <span className=\"font-semibold text-foreground\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/radix-vega/ui/scroll-area\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 overflow-hidden rounded-md border style-lyra:rounded-none style-maia:rounded-2xl style-luma:rounded-2xl style-sera:rounded-none\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 overflow-hidden rounded-md border p-4 **:data-[slot=scroll-area-viewport]:rounded-md style-lyra:rounded-none style-lyra:**:data-[slot=scroll-area-viewport]:rounded-none style-maia:rounded-2xl style-luma:rounded-2xl style-sera:rounded-none style-sera:**:data-[slot=scroll-area-viewport]:rounded-none\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md style-lyra:rounded-none style-sera:rounded-none\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-3/4 h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n                Photo by{\" \"}\n                <span className=\"font-semibold text-foreground\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/sheet-example.json b/apps/v4/public/r/styles/radix-vega/sheet-example.json
index f0395611be..76ea6631c4 100644
--- a/apps/v4/public/r/styles/radix-vega/sheet-example.json
+++ b/apps/v4/public/r/styles/radix-vega/sheet-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/sheet-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-vega/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">Open</Button>\n        </SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\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 { Field, FieldGroup, FieldLabel } from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-vega/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">Open</Button>\n        </SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6 style-sera:px-8\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6 style-sera:px-8\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed style-sera:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/tabs-example.json b/apps/v4/public/r/styles/radix-vega/tabs-example.json
index 30bcc33f30..398ddeb65e 100644
--- a/apps/v4/public/r/styles/radix-vega/tabs-example.json
+++ b/apps/v4/public/r/styles/radix-vega/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/tabs-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  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-vega/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n              data-icon=\"inline-start\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n              data-icon=\"inline-start\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\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  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-vega/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n              data-icon=\"inline-start\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n              data-icon=\"inline-start\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/tooltip-example.json b/apps/v4/public/r/styles/radix-vega/tooltip-example.json
index 907e71495c..3ad555a51e 100644
--- a/apps/v4/public/r/styles/radix-vega/tooltip-example.json
+++ b/apps/v4/public/r/styles/radix-vega/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/tooltip-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Kbd } from \"@/registry/radix-vega/ui/kbd\"\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 TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          Save Changes <Kbd>S</Kbd>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"w-fit text-sm text-primary underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Kbd } from \"@/registry/radix-vega/ui/kbd\"\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 TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"w-fit capitalize style-sera:uppercase\"\n              >\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          Save Changes <Kbd>S</Kbd>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"w-fit text-sm text-primary underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/registry/bases/base/blocks/preview-02/cards/contribution-history.tsx b/apps/v4/registry/bases/base/blocks/preview-02/cards/contribution-history.tsx
index 0c5131ed2f..64691ebdc7 100644
--- a/apps/v4/registry/bases/base/blocks/preview-02/cards/contribution-history.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview-02/cards/contribution-history.tsx
@@ -112,7 +112,7 @@ export function ContributionHistory() {
         </div>
       </CardContent>
       <CardFooter>
-        <Button className="style-sera:w-full">View Full Report</Button>
+        <Button className="w-full">View Full Report</Button>
       </CardFooter>
     </Card>
   )
diff --git a/apps/v4/registry/bases/base/blocks/preview-02/cards/dividend-income.tsx b/apps/v4/registry/bases/base/blocks/preview-02/cards/dividend-income.tsx
index 99c6a5ab45..b9c6645356 100644
--- a/apps/v4/registry/bases/base/blocks/preview-02/cards/dividend-income.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview-02/cards/dividend-income.tsx
@@ -2,8 +2,6 @@
 
 import { Bar, BarChart, XAxis } from "recharts"
 
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
-
 import { Button } from "@/registry/bases/base/ui/button"
 import {
   Card,
@@ -26,6 +24,7 @@ import {
   ItemGroup,
   ItemTitle,
 } from "@/registry/bases/base/ui/item"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
 import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
 
 const HOLDINGS = [
diff --git a/apps/v4/registry/bases/base/blocks/preview-02/cards/power-usage.tsx b/apps/v4/registry/bases/base/blocks/preview-02/cards/power-usage.tsx
index 5c498b8b3a..bbad093d5b 100644
--- a/apps/v4/registry/bases/base/blocks/preview-02/cards/power-usage.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview-02/cards/power-usage.tsx
@@ -2,8 +2,6 @@
 
 import { Bar, BarChart, XAxis } from "recharts"
 
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
-
 import {
   Card,
   CardContent,
@@ -20,6 +18,7 @@ import {
 } from "@/registry/bases/base/ui/chart"
 import { Progress } from "@/registry/bases/base/ui/progress"
 import { Separator } from "@/registry/bases/base/ui/separator"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
 
 const chartData = [
   { hour: "6a", usage: 1.2 },
diff --git a/apps/v4/registry/bases/base/blocks/preview-02/cards/social-links.tsx b/apps/v4/registry/bases/base/blocks/preview-02/cards/social-links.tsx
index b98cf34ecf..662b0115e5 100644
--- a/apps/v4/registry/bases/base/blocks/preview-02/cards/social-links.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview-02/cards/social-links.tsx
@@ -97,7 +97,9 @@ export function SocialLinks() {
         </FieldGroup>
       </CardContent>
       <CardFooter className="justify-end gap-2 style-sera:justify-center">
-        <Button variant="secondary" className="style-sera:flex-1">Discard</Button>
+        <Button variant="secondary" className="style-sera:flex-1">
+          Discard
+        </Button>
         <Button className="style-sera:flex-1">Save Changes</Button>
       </CardFooter>
     </Card>
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/activate-agent-dialog.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/activate-agent-dialog.tsx
index 45b8a30a56..2064ef23ba 100644
--- a/apps/v4/registry/bases/base/blocks/preview/cards/activate-agent-dialog.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/activate-agent-dialog.tsx
@@ -95,7 +95,9 @@ export function ActivateAgentDialog() {
         </Alert>
       </CardContent>
       <CardFooter className="justify-end gap-2">
-        <Button variant="outline" className="style-sera:hidden">Cancel</Button>
+        <Button variant="outline" className="style-sera:hidden">
+          Cancel
+        </Button>
         <Button className="style-sera:w-full">Enable with $100 credits</Button>
       </CardFooter>
     </Card>
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/bar-chart-card.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/bar-chart-card.tsx
index 5bc9378968..bb79a8f5fa 100644
--- a/apps/v4/registry/bases/base/blocks/preview/cards/bar-chart-card.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/bar-chart-card.tsx
@@ -3,7 +3,6 @@
 import * as React from "react"
 import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
 
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
 import { Button } from "@/registry/bases/base/ui/button"
 import {
   Card,
@@ -21,6 +20,7 @@ import {
   ChartTooltipContent,
   type ChartConfig,
 } from "@/registry/bases/base/ui/chart"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
 
 const barChartData = [
   { month: "January", desktop: 186, mobile: 80 },
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/contributions-activity.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/contributions-activity.tsx
index 1238e796f5..b3bc6169e0 100644
--- a/apps/v4/registry/bases/base/blocks/preview/cards/contributions-activity.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/contributions-activity.tsx
@@ -56,7 +56,9 @@ export function ContributionsActivity() {
         </form>
       </CardContent>
       <CardFooter>
-        <Button form="contributions-activity" className="style-sera:w-full">Save Changes</Button>
+        <Button form="contributions-activity" className="style-sera:w-full">
+          Save Changes
+        </Button>
       </CardFooter>
     </Card>
   )
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/feedback-form.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/feedback-form.tsx
index 172b3c5dd1..d601f7d0f5 100644
--- a/apps/v4/registry/bases/base/blocks/preview/cards/feedback-form.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/feedback-form.tsx
@@ -57,7 +57,11 @@ export function FeedbackForm() {
         </form>
       </CardContent>
       <CardFooter>
-        <Button type="submit" form="feedback-form" className="style-sera:w-full">
+        <Button
+          type="submit"
+          form="feedback-form"
+          className="style-sera:w-full"
+        >
           Submit
         </Button>
       </CardFooter>
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/github-profile.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/github-profile.tsx
index 4ab39ca0d2..d3ace74b4a 100644
--- a/apps/v4/registry/bases/base/blocks/preview/cards/github-profile.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/github-profile.tsx
@@ -70,7 +70,9 @@ export function GithubProfile() {
         </form>
       </CardContent>
       <CardFooter>
-        <Button form="profile" className="style-sera:w-full">Save Profile</Button>
+        <Button form="profile" className="style-sera:w-full">
+          Save Profile
+        </Button>
       </CardFooter>
     </Card>
   )
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/icon-preview-grid.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/icon-preview-grid.tsx
index 8be09ce0db..7e4d18ce5d 100644
--- a/apps/v4/registry/bases/base/blocks/preview/cards/icon-preview-grid.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/icon-preview-grid.tsx
@@ -128,7 +128,7 @@ export function IconPreviewGrid() {
           {PREVIEW_ICONS.map((icon, index) => (
             <div
               key={index}
-              className="flex size-8 items-center justify-center rounded-md ring ring-border *:[svg]:size-4 style-sera:rounded-none"
+              className="flex size-8 items-center justify-center rounded-md ring ring-border style-sera:rounded-none *:[svg]:size-4"
             >
               <IconPlaceholder
                 lucide={icon.lucide}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/report-bug.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/report-bug.tsx
index c126193753..732e0a4a25 100644
--- a/apps/v4/registry/bases/base/blocks/preview/cards/report-bug.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/report-bug.tsx
@@ -98,8 +98,13 @@ export function ReportBug() {
         </FieldGroup>
       </CardContent>
       <CardFooter>
-        <Field orientation="horizontal" className="justify-end style-sera:justify-center">
-          <Button variant="outline" className="style-sera:flex-1">Attach File</Button>
+        <Field
+          orientation="horizontal"
+          className="justify-end style-sera:justify-center"
+        >
+          <Button variant="outline" className="style-sera:flex-1">
+            Attach File
+          </Button>
           <Button className="style-sera:flex-1">Submit Bug</Button>
         </Field>
       </CardFooter>
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/ui-elements.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/ui-elements.tsx
index dfcc743ef7..235ef0a674 100644
--- a/apps/v4/registry/bases/base/blocks/preview/cards/ui-elements.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/ui-elements.tsx
@@ -135,7 +135,9 @@ export function UIElements() {
         <div className="flex items-center gap-4">
           <AlertDialog>
             <AlertDialogTrigger render={<Button variant="outline" />}>
-              <span className="hidden md:flex style-sera:md:hidden">Alert Dialog</span>
+              <span className="hidden md:flex style-sera:md:hidden">
+                Alert Dialog
+              </span>
               <span className="flex md:hidden style-sera:md:flex">Dialog</span>
             </AlertDialogTrigger>
             <AlertDialogContent size="sm">
diff --git a/apps/v4/registry/bases/radix/blocks/preview-02/cards/contribution-history.tsx b/apps/v4/registry/bases/radix/blocks/preview-02/cards/contribution-history.tsx
index 313d460828..f833015434 100644
--- a/apps/v4/registry/bases/radix/blocks/preview-02/cards/contribution-history.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview-02/cards/contribution-history.tsx
@@ -111,8 +111,8 @@ export function ContributionHistory() {
           </Item>
         </div>
       </CardContent>
-      <CardFooter className="flex-col gap-4">
-        <Button className="style-sera:w-full">View Full Report</Button>
+      <CardFooter>
+        <Button className="w-full">View Full Report</Button>
       </CardFooter>
     </Card>
   )
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/bar-chart-card.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/bar-chart-card.tsx
index 588326fe9e..4d77786a80 100644
--- a/apps/v4/registry/bases/radix/blocks/preview/cards/bar-chart-card.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/bar-chart-card.tsx
@@ -3,7 +3,6 @@
 import * as React from "react"
 import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
 
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
 import { Button } from "@/registry/bases/radix/ui/button"
 import {
   Card,
@@ -21,6 +20,7 @@ import {
   ChartTooltipContent,
   type ChartConfig,
 } from "@/registry/bases/radix/ui/chart"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
 
 const barChartData = [
   { month: "January", desktop: 186, mobile: 80 },
diff --git a/apps/v4/registry/config.ts b/apps/v4/registry/config.ts
index 12df25b6d4..c280694fe1 100644
--- a/apps/v4/registry/config.ts
+++ b/apps/v4/registry/config.ts
@@ -406,15 +406,15 @@ export const PRESETS: Preset[] = [
   {
     name: "radix-sera",
     title: "Sera (Radix)",
-    description: "Sera / Lucide / Inter + Playfair Display",
+    description: "Sera / Lucide / Noto Sans + EB Garamond",
     base: "radix",
     style: "sera",
-    baseColor: "neutral",
-    theme: "neutral",
-    chartColor: "neutral",
+    baseColor: "taupe",
+    theme: "taupe",
+    chartColor: "taupe",
     iconLibrary: "lucide",
-    font: "inter",
-    fontHeading: "playfair-display",
+    font: "noto-sans",
+    fontHeading: "eb-garamond",
     item: "Item",
     rtl: false,
     menuAccent: "subtle",
@@ -424,15 +424,15 @@ export const PRESETS: Preset[] = [
   {
     name: "base-sera",
     title: "Sera (Base)",
-    description: "Sera / Lucide / Inter + Playfair Display",
+    description: "Sera / Lucide / Noto Sans + EB Garamond",
     base: "base",
     style: "sera",
-    baseColor: "neutral",
-    theme: "neutral",
-    chartColor: "neutral",
+    baseColor: "taupe",
+    theme: "taupe",
+    chartColor: "taupe",
     iconLibrary: "lucide",
-    font: "inter",
-    fontHeading: "playfair-display",
+    font: "noto-sans",
+    fontHeading: "eb-garamond",
     item: "Item",
     rtl: false,
     menuAccent: "subtle",
diff --git a/apps/v4/registry/styles.tsx b/apps/v4/registry/styles.tsx
index c29dd5115c..8907d646f1 100644
--- a/apps/v4/registry/styles.tsx
+++ b/apps/v4/registry/styles.tsx
@@ -1,5 +1,3 @@
-import * as React from "react"
-
 export const STYLES = [
   {
     name: "vega",
@@ -119,7 +117,7 @@ export const STYLES = [
   {
     name: "luma",
     title: "Luma",
-    description: "Fluid, luminous, and glassy.",
+    description: "Fluid, luminous, and soft.",
     icon: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/v4/styles/base-luma/ui/field.tsx b/apps/v4/styles/base-luma/ui/field.tsx
index 382942e637..4ccd7f6ccd 100644
--- a/apps/v4/styles/base-luma/ui/field.tsx
+++ b/apps/v4/styles/base-luma/ui/field.tsx
@@ -120,7 +120,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-label"
       className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/base-lyra/ui/field.tsx b/apps/v4/styles/base-lyra/ui/field.tsx
index 1053bffa55..acec7c0440 100644
--- a/apps/v4/styles/base-lyra/ui/field.tsx
+++ b/apps/v4/styles/base-lyra/ui/field.tsx
@@ -120,7 +120,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-label"
       className={cn(
-        "flex w-fit items-center gap-2 text-xs/relaxed leading-snug group-data-[disabled=true]/field:opacity-50",
+        "flex w-fit items-center gap-2 text-xs/relaxed group-data-[disabled=true]/field:opacity-50",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/base-maia/ui/field.tsx b/apps/v4/styles/base-maia/ui/field.tsx
index d9f2b8f701..7e4797c3af 100644
--- a/apps/v4/styles/base-maia/ui/field.tsx
+++ b/apps/v4/styles/base-maia/ui/field.tsx
@@ -120,7 +120,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-label"
       className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/base-mira/ui/field.tsx b/apps/v4/styles/base-mira/ui/field.tsx
index 7d6205b42c..2d6e26485d 100644
--- a/apps/v4/styles/base-mira/ui/field.tsx
+++ b/apps/v4/styles/base-mira/ui/field.tsx
@@ -120,7 +120,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-label"
       className={cn(
-        "flex w-fit items-center gap-2 text-xs/relaxed leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        "flex w-fit items-center gap-2 text-xs/relaxed font-medium group-data-[disabled=true]/field:opacity-50",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/base-nova/ui-rtl/field.tsx b/apps/v4/styles/base-nova/ui-rtl/field.tsx
index c67edcf80b..8db57b397b 100644
--- a/apps/v4/styles/base-nova/ui-rtl/field.tsx
+++ b/apps/v4/styles/base-nova/ui-rtl/field.tsx
@@ -120,7 +120,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-label"
       className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/base-nova/ui/field.tsx b/apps/v4/styles/base-nova/ui/field.tsx
index 86ad015dbf..98fa387a7a 100644
--- a/apps/v4/styles/base-nova/ui/field.tsx
+++ b/apps/v4/styles/base-nova/ui/field.tsx
@@ -120,7 +120,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-label"
       className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/base-sera/ui/accordion.tsx b/apps/v4/styles/base-sera/ui/accordion.tsx
new file mode 100644
index 0000000000..3f612ba3f7
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/accordion.tsx
@@ -0,0 +1,78 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 rounded-none border border-transparent py-4 text-left text-sm font-semibold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <ChevronUpIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/apps/v4/styles/base-sera/ui/alert-dialog.tsx b/apps/v4/styles/base-sera/ui/alert-dialog.tsx
new file mode 100644
index 0000000000..f7e9933944
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/alert-dialog.tsx
@@ -0,0 +1,187 @@
+"use client"
+
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/styles/base-sera/ui/button"
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/20 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-none bg-popover p-6 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-2 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-16 items-center justify-center rounded-none bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "cn-font-heading text-lg tracking-wider uppercase sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "mt-0.5 text-sm leading-relaxed text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="alert-dialog-action"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}
diff --git a/apps/v4/styles/base-sera/ui/alert.tsx b/apps/v4/styles/base-sera/ui/alert.tsx
new file mode 100644
index 0000000000..1c2ff0862f
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/alert.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-1 border bg-background px-4 py-3 text-left text-sm after:absolute after:-inset-y-px after:-left-px after:w-0.5 has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground after:bg-foreground",
+        destructive:
+          "bg-card text-destructive after:bg-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "cn-font-heading font-sans font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2.5 right-3", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }
diff --git a/apps/v4/styles/base-sera/ui/aspect-ratio.tsx b/apps/v4/styles/base-sera/ui/aspect-ratio.tsx
new file mode 100644
index 0000000000..4c0ebaa57c
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/aspect-ratio.tsx
@@ -0,0 +1,22 @@
+import { cn } from "@/lib/utils"
+
+function AspectRatio({
+  ratio,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & { ratio: number }) {
+  return (
+    <div
+      data-slot="aspect-ratio"
+      style={
+        {
+          "--ratio": ratio,
+        } as React.CSSProperties
+      }
+      className={cn("relative aspect-(--ratio)", className)}
+      {...props}
+    />
+  )
+}
+
+export { AspectRatio }
diff --git a/apps/v4/styles/base-sera/ui/avatar.tsx b/apps/v4/styles/base-sera/ui/avatar.tsx
new file mode 100644
index 0000000000..e4fed865cf
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/avatar.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: AvatarPrimitive.Root.Props & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn(
+        "aspect-square size-full rounded-full object-cover",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: AvatarPrimitive.Fallback.Props) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+}
diff --git a/apps/v4/styles/base-sera/ui/badge.tsx b/apps/v4/styles/base-sera/ui/badge.tsx
new file mode 100644
index 0000000000..5827d1959e
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/badge.tsx
@@ -0,0 +1,52 @@
+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 { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-none border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }
diff --git a/apps/v4/styles/base-sera/ui/breadcrumb.tsx b/apps/v4/styles/base-sera/ui/breadcrumb.tsx
new file mode 100644
index 0000000000..9728025a05
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/breadcrumb.tsx
@@ -0,0 +1,122 @@
+import * as React from "react"
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      aria-label="breadcrumb"
+      data-slot="breadcrumb"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"a">) {
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps<"a">(
+      {
+        className: cn("transition-colors hover:text-foreground", className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "breadcrumb-link",
+    },
+  })
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRightIcon className="cn-rtl-flip" />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn(
+        "flex size-5 items-center justify-center [&>svg]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
diff --git a/apps/v4/styles/base-sera/ui/button-group.tsx b/apps/v4/styles/base-sera/ui/button-group.tsx
new file mode 100644
index 0000000000..b73ccd2cfb
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/button-group.tsx
@@ -0,0 +1,87 @@
+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 { cn } from "@/lib/utils"
+import { Separator } from "@/styles/base-sera/ui/separator"
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 *:data-[slot=input]:px-4 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-border has-[>[data-variant=outline]]:*:data-[slot=input-group]:px-2.5 has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-border has-[>[data-variant=outline]]:*:[[role=combobox]]:px-2.5 has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-ring has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-ring has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:[&>input]:border-border has-[>[data-variant=outline]]:[&>input:focus-visible]:border-ring",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+        vertical:
+          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(
+          "flex items-center gap-2 border border-transparent border-b-input bg-transparent px-2.5 text-xs font-semibold uppercase group-has-[>[data-variant=outline]]/button-group:border-border [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "button-group-text",
+    },
+  })
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}
diff --git a/apps/v4/styles/base-sera/ui/button.tsx b/apps/v4/styles/base-sera/ui/button.tsx
new file mode 100644
index 0000000000..8c2a9fd852
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/button.tsx
@@ -0,0 +1,56 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-transparent hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-input/30",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-10 gap-1.5 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
+        xs: "h-7 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-9 gap-1 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        lg: "h-11 gap-1.5 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5",
+        icon: "size-10",
+        "icon-xs": "size-7 [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-9",
+        "icon-lg": "size-11",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/apps/v4/styles/base-sera/ui/calendar.tsx b/apps/v4/styles/base-sera/ui/calendar.tsx
new file mode 100644
index 0000000000..1b14016379
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/calendar.tsx
@@ -0,0 +1,231 @@
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type DayButton,
+  type Locale,
+} from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/styles/base-sera/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  locale,
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "group/calendar bg-background p-3 [--cell-radius:0] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      locale={locale}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString(locale?.code, { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "cn-calendar-dropdown-root relative rounded-(--cell-radius)",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute inset-0 bg-popover opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "font-medium select-none",
+          captionLayout === "label"
+            ? "text-sm"
+            : "cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-(--cell-size) select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] text-muted-foreground select-none",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn(
+          "relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_end
+        ),
+        today: cn(
+          "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon
+                className={cn("cn-rtl-flip size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("cn-rtl-flip size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: ({ ...props }) => (
+          <CalendarDayButton locale={locale} {...props} />
+        ),
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  locale,
+  ...props
+}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString(locale?.code)}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }
diff --git a/apps/v4/styles/base-sera/ui/card.tsx b/apps/v4/styles/base-sera/ui/card.tsx
new file mode 100644
index 0000000000..bcd713bec6
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/card.tsx
@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-8 overflow-hidden bg-card py-8 text-sm text-card-foreground shadow-sm ring-1 ring-foreground/5 has-[>img:first-child]:pt-0 data-[size=sm]:gap-5 data-[size=sm]:py-5 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1.5 rounded-none px-8 group-data-[size=sm]/card:px-5 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-8 group-data-[size=sm]/card:[.border-b]:pb-5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "cn-font-heading text-lg tracking-wider uppercase",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm leading-relaxed text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-8 group-data-[size=sm]/card:px-5", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center px-8 group-data-[size=sm]/card:px-5 [.border-t]:pt-8 group-data-[size=sm]/card:[.border-t]:pt-5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/apps/v4/styles/base-sera/ui/carousel.tsx b/apps/v4/styles/base-sera/ui/carousel.tsx
new file mode 100644
index 0000000000..95def5c666
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/carousel.tsx
@@ -0,0 +1,242 @@
+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/styles/base-sera/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext]
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute touch-manipulation",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ChevronLeftIcon className="cn-rtl-flip" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute touch-manipulation",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ChevronRightIcon className="cn-rtl-flip" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  useCarousel,
+}
diff --git a/apps/v4/styles/base-sera/ui/chart.tsx b/apps/v4/styles/base-sera/ui/chart.tsx
new file mode 100644
index 0000000000..812b9ce9f3
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/chart.tsx
@@ -0,0 +1,373 @@
+"use client"
+
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+import type { TooltipValueType } from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+const INITIAL_DIMENSION = { width: 320, height: 200 } as const
+type TooltipNameType = number | string
+
+export type ChartConfig = Record<
+  string,
+  {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+>
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  initialDimension = INITIAL_DIMENSION,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"]
+  initialDimension?: {
+    width: number
+    height: number
+  }
+}) {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer
+          initialDimension={initialDimension}
+        >
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme ?? config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: "line" | "dot" | "dashed"
+    nameKey?: string
+    labelKey?: string
+  } & Omit<
+    RechartsPrimitive.DefaultTooltipContentProps<
+      TooltipValueType,
+      TooltipNameType
+    >,
+    "accessibilityLayer"
+  >) {
+  const { config } = useChart()
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+
+    const [item] = payload
+    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === "string"
+        ? (config[label]?.label ?? label)
+        : itemConfig?.label
+
+    if (labelFormatter) {
+      return (
+        <div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      )
+    }
+
+    if (!value) {
+      return null
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot"
+
+  return (
+    <div
+      className={cn(
+        "grid min-w-32 items-start gap-1.5 bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-sm ring-1 ring-foreground/10",
+        className
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload
+          .filter((item) => item.type !== "none")
+          .map((item, index) => {
+            const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color ?? item.payload?.fill ?? item.color
+
+            return (
+              <div
+                key={index}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label ?? item.name}
+                        </span>
+                      </div>
+                      {item.value != null && (
+                        <span className="font-mono font-medium text-foreground tabular-nums">
+                          {typeof item.value === "number"
+                            ? item.value.toLocaleString()
+                            : String(item.value)}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+      </div>
+    </div>
+  )
+}
+
+const ChartLegend = RechartsPrimitive.Legend
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: React.ComponentProps<"div"> & {
+  hideIcon?: boolean
+  nameKey?: string
+} & RechartsPrimitive.DefaultLegendContentProps) {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      )}
+    >
+      {payload
+        .filter((item) => item.type !== "none")
+        .map((item, index) => {
+          const key = `${nameKey ?? item.dataKey ?? "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={index}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+    </div>
+  )
+}
+
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}
diff --git a/apps/v4/styles/base-sera/ui/checkbox.tsx b/apps/v4/styles/base-sera/ui/checkbox.tsx
new file mode 100644
index 0000000000..2e703153fb
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/checkbox.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer relative flex size-4.5 shrink-0 items-center justify-center rounded-none border border-input bg-transparent transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+      >
+        <CheckIcon />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
diff --git a/apps/v4/styles/base-sera/ui/collapsible.tsx b/apps/v4/styles/base-sera/ui/collapsible.tsx
new file mode 100644
index 0000000000..488fb33af5
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/collapsible.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"
+
+function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
+  return (
+    <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
+  )
+}
+
+function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
+  return (
+    <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/apps/v4/styles/base-sera/ui/combobox.tsx b/apps/v4/styles/base-sera/ui/combobox.tsx
new file mode 100644
index 0000000000..871b97140a
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/combobox.tsx
@@ -0,0 +1,303 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react"
+import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/styles/base-sera/ui/button"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/styles/base-sera/ui/input-group"
+
+const Combobox = ComboboxPrimitive.Root
+
+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
+}
+
+function ComboboxTrigger({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Trigger.Props) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-trigger"
+      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+    </ComboboxPrimitive.Trigger>
+  )
+}
+
+function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
+  return (
+    <ComboboxPrimitive.Clear
+      data-slot="combobox-clear"
+      render={<InputGroupButton variant="ghost" size="icon-xs" />}
+      className={cn(className)}
+      {...props}
+    >
+      <XIcon className="pointer-events-none" />
+    </ComboboxPrimitive.Clear>
+  )
+}
+
+function ComboboxInput({
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}: ComboboxPrimitive.Input.Props & {
+  showTrigger?: boolean
+  showClear?: boolean
+}) {
+  return (
+    <InputGroup className={cn("w-auto", className)}>
+      <ComboboxPrimitive.Input
+        render={<InputGroupInput disabled={disabled} />}
+        {...props}
+      />
+      <InputGroupAddon align="inline-end">
+        {showTrigger && (
+          <InputGroupButton
+            size="icon-xs"
+            variant="ghost"
+            render={<ComboboxTrigger />}
+            data-slot="input-group-button"
+            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+            disabled={disabled}
+          />
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
+      {children}
+    </InputGroup>
+  )
+}
+
+function ComboboxContent({
+  className,
+  side = "bottom",
+  sideOffset = 6,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  ...props
+}: ComboboxPrimitive.Popup.Props &
+  Pick<
+    ComboboxPrimitive.Positioner.Props,
+    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
+  >) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="isolate z-50"
+      >
+        <ComboboxPrimitive.Popup
+          data-slot="combobox-content"
+          data-chips={!!anchor}
+          className={cn(
+            "cn-menu-target cn-menu-translucent group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1.5 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-transparent *:data-[slot=input-group]:bg-transparent *:data-[slot=input-group]:px-2.5 *:data-[slot=input-group]:focus-within:border-transparent data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  )
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn(
+        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1.5 overflow-y-auto overscroll-contain p-1.5 data-empty:p-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxItem({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Item.Props) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  )
+}
+
+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
+  return (
+    <ComboboxPrimitive.Group
+      data-slot="combobox-group"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxLabel({
+  className,
+  ...props
+}: ComboboxPrimitive.GroupLabel.Props) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot="combobox-label"
+      className={cn(
+        "px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
+  return (
+    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
+  )
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="combobox-empty"
+      className={cn(
+        "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxSeparator({
+  className,
+  ...props
+}: ComboboxPrimitive.Separator.Props) {
+  return (
+    <ComboboxPrimitive.Separator
+      data-slot="combobox-separator"
+      className={cn("-mx-1.5 my-1.5 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChips({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
+  ComboboxPrimitive.Chips.Props) {
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot="combobox-chips"
+      className={cn(
+        "flex min-h-10 flex-wrap items-center gap-1.5 rounded-none border border-transparent border-b-input bg-transparent bg-clip-padding px-0 py-1.5 text-sm transition-[color,border-color] focus-within:border-b-ring has-aria-invalid:border-b-destructive has-data-[slot=combobox-chip]:px-0 dark:has-aria-invalid:border-b-destructive/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChip({
+  className,
+  children,
+  showRemove = true,
+  ...props
+}: ComboboxPrimitive.Chip.Props & {
+  showRemove?: boolean
+}) {
+  return (
+    <ComboboxPrimitive.Chip
+      data-slot="combobox-chip"
+      className={cn(
+        "flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-none bg-muted px-2 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove
+          render={<Button variant="ghost" size="icon-xs" />}
+          className="-ml-1 opacity-50 hover:opacity-100"
+          data-slot="combobox-chip-remove"
+        >
+          <XIcon className="pointer-events-none" />
+        </ComboboxPrimitive.ChipRemove>
+      )}
+    </ComboboxPrimitive.Chip>
+  )
+}
+
+function ComboboxChipsInput({
+  className,
+  ...props
+}: ComboboxPrimitive.Input.Props) {
+  return (
+    <ComboboxPrimitive.Input
+      data-slot="combobox-chip-input"
+      className={cn("min-w-16 flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+function useComboboxAnchor() {
+  return React.useRef<HTMLDivElement | null>(null)
+}
+
+export {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxEmpty,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+}
diff --git a/apps/v4/styles/base-sera/ui/command.tsx b/apps/v4/styles/base-sera/ui/command.tsx
new file mode 100644
index 0000000000..190aca06cf
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/command.tsx
@@ -0,0 +1,190 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { CheckIcon, SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/styles/base-sera/ui/dialog"
+import { InputGroup, InputGroupAddon } from "@/styles/base-sera/ui/input-group"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "flex size-full flex-col overflow-hidden bg-popover text-popover-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = false,
+  ...props
+}: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+  children: React.ReactNode
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("top-1/3 translate-y-0 overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        {children}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div data-slot="command-input-wrapper" className="p-1">
+      <InputGroup className="border-transparent border-b-input bg-transparent px-3">
+        <CommandPrimitive.Input
+          data-slot="command-input"
+          className={cn(
+            "w-full px-2 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          )}
+          {...props}
+        />
+        <InputGroupAddon>
+          <SearchIcon className="size-4 shrink-0 opacity-50" />
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className={cn("py-6 text-center text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "overflow-hidden p-1.5 text-foreground **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-[0.625rem] **:[[cmdk-group-heading]]:font-semibold **:[[cmdk-group-heading]]:tracking-wider **:[[cmdk-group-heading]]:text-foreground **:[[cmdk-group-heading]]:uppercase",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("my-1 h-px bg-border/50", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+    </CommandPrimitive.Item>
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/apps/v4/styles/base-sera/ui/context-menu.tsx b/apps/v4/styles/base-sera/ui/context-menu.tsx
new file mode 100644
index 0000000000..a9fe27a5df
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/context-menu.tsx
@@ -0,0 +1,272 @@
+"use client"
+
+import * as React from "react"
+import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  )
+}
+
+function ContextMenuTrigger({
+  className,
+  ...props
+}: ContextMenuPrimitive.Trigger.Props) {
+  return (
+    <ContextMenuPrimitive.Trigger
+      data-slot="context-menu-trigger"
+      className={cn("select-none", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({
+  className,
+  align = "start",
+  alignOffset = 4,
+  side = "right",
+  sideOffset = 0,
+  ...props
+}: ContextMenuPrimitive.Popup.Props &
+  Pick<
+    ContextMenuPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <ContextMenuPrimitive.Popup
+          data-slot="context-menu-content"
+          className={cn(
+            "cn-menu-target cn-menu-translucent z-50 max-h-(--available-height) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        />
+      </ContextMenuPrimitive.Positioner>
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: ContextMenuPrimitive.GroupLabel.Props & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.GroupLabel
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase data-inset:pl-9.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: ContextMenuPrimitive.Item.Props & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/context-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {
+  return (
+    <ContextMenuPrimitive.SubmenuRoot data-slot="context-menu-sub" {...props} />
+  )
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: ContextMenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubmenuTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="cn-rtl-flip ml-auto" />
+    </ContextMenuPrimitive.SubmenuTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  ...props
+}: React.ComponentProps<typeof ContextMenuContent>) {
+  return (
+    <ContextMenuContent
+      data-slot="context-menu-sub-content"
+      className="cn-menu-target cn-menu-translucent shadow-md"
+      side="right"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: ContextMenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2">
+        <ContextMenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon />
+        </ContextMenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: ContextMenuPrimitive.RadioGroup.Props) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: ContextMenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2">
+        <ContextMenuPrimitive.RadioItemIndicator>
+          <CheckIcon />
+        </ContextMenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: ContextMenuPrimitive.Separator.Props) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("-mx-1.5 my-1.5 h-px bg-border/50", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
diff --git a/apps/v4/styles/base-sera/ui/dialog.tsx b/apps/v4/styles/base-sera/ui/dialog.tsx
new file mode 100644
index 0000000000..22f94f63a8
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/dialog.tsx
@@ -0,0 +1,159 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/styles/base-sera/ui/button"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/20 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-none bg-popover p-6 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-5 right-5 bg-secondary"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "cn-font-heading text-lg leading-none tracking-wider uppercase",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "mt-0.5 text-sm leading-relaxed text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/apps/v4/styles/base-sera/ui/direction.tsx b/apps/v4/styles/base-sera/ui/direction.tsx
new file mode 100644
index 0000000000..d8cf134614
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/direction.tsx
@@ -0,0 +1,6 @@
+"use client"
+
+export {
+  DirectionProvider,
+  useDirection,
+} from "@base-ui/react/direction-provider"
diff --git a/apps/v4/styles/base-sera/ui/drawer.tsx b/apps/v4/styles/base-sera/ui/drawer.tsx
new file mode 100644
index 0000000000..9bf36860ac
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/drawer.tsx
@@ -0,0 +1,137 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/20 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground 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=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t 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=left]:rounded-none data-[vaul-drawer-direction=left]:border-r 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=right]:rounded-none data-[vaul-drawer-direction=right]:border-l 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=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        <div className="mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-none bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex flex-col 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:gap-2 md:text-left",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn(
+        "cn-font-heading text-lg tracking-wider text-foreground uppercase",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn(
+        "mt-0.5 text-sm leading-relaxed text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
diff --git a/apps/v4/styles/base-sera/ui/dropdown-menu.tsx b/apps/v4/styles/base-sera/ui/dropdown-menu.tsx
new file mode 100644
index 0000000000..71964f9ca9
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/dropdown-menu.tsx
@@ -0,0 +1,272 @@
+"use client"
+
+import * as React from "react"
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+}
+
+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
+}
+
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}: MenuPrimitive.Popup.Props &
+  Pick<
+    MenuPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          data-slot="dropdown-menu-content"
+          className={cn(
+            "cn-menu-target cn-menu-translucent z-50 max-h-(--available-height) w-(--anchor-width) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: MenuPrimitive.GroupLabel.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.GroupLabel
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase data-inset:pl-9.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: MenuPrimitive.Item.Props & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="cn-rtl-flip ml-auto" />
+    </MenuPrimitive.SubmenuTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+  return (
+    <DropdownMenuContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "cn-menu-target cn-menu-translucent w-auto min-w-36 rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className
+      )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <MenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+  return (
+    <MenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <MenuPrimitive.RadioItemIndicator>
+          <CheckIcon />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: MenuPrimitive.Separator.Props) {
+  return (
+    <MenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1.5 my-1.5 h-px bg-border/50", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
diff --git a/apps/v4/styles/base-sera/ui/empty.tsx b/apps/v4/styles/base-sera/ui/empty.tsx
new file mode 100644
index 0000000000..0419891e7d
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/empty.tsx
@@ -0,0 +1,104 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 border-dashed p-12 text-center text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn("flex max-w-sm flex-col items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "flex size-10 shrink-0 items-center justify-center rounded-none bg-muted text-foreground [&_svg:not([class*='size-'])]:size-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn(
+        "cn-font-heading text-lg tracking-wider uppercase",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "mt-0.5 text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}
diff --git a/apps/v4/styles/base-sera/ui/field.tsx b/apps/v4/styles/base-sera/ui/field.tsx
new file mode 100644
index 0000000000..e7998c1b51
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/field.tsx
@@ -0,0 +1,238 @@
+"use client"
+
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/styles/base-sera/ui/label"
+import { Separator } from "@/styles/base-sera/ui/separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-3 font-semibold uppercase data-[variant=label]:text-xs data-[variant=legend]:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-10 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+        horizontal:
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        responsive:
+          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-1 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-relaxed group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-4 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-xs font-semibold tracking-wide uppercase group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-left text-sm leading-normal font-normal tracking-normal text-muted-foreground normal-case group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}
diff --git a/apps/v4/styles/base-sera/ui/hover-card.tsx b/apps/v4/styles/base-sera/ui/hover-card.tsx
new file mode 100644
index 0000000000..170cdb1df9
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/hover-card.tsx
@@ -0,0 +1,51 @@
+"use client"
+
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
+  return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {
+  return (
+    <PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 4,
+  ...props
+}: PreviewCardPrimitive.Popup.Props &
+  Pick<
+    PreviewCardPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <PreviewCardPrimitive.Portal data-slot="hover-card-portal">
+      <PreviewCardPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <PreviewCardPrimitive.Popup
+          data-slot="hover-card-content"
+          className={cn(
+            "z-50 w-72 origin-(--transform-origin) bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        />
+      </PreviewCardPrimitive.Positioner>
+    </PreviewCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/apps/v4/styles/base-sera/ui/input-group.tsx b/apps/v4/styles/base-sera/ui/input-group.tsx
new file mode 100644
index 0000000000..6bf19daacf
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/input-group.tsx
@@ -0,0 +1,155 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/styles/base-sera/ui/button"
+import { Input } from "@/styles/base-sera/ui/input"
+import { Textarea } from "@/styles/base-sera/ui/textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex h-10 w-full min-w-0 items-center rounded-none border border-transparent border-b-input bg-transparent transition-[color,border-color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-none has-data-[align=block-start]:rounded-none has-[[data-slot=input-group-control]:focus-visible]:border-b-ring has-[[data-slot][aria-invalid=true]]:border-b-destructive has-[textarea]:rounded-none has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:border-b-destructive/50 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-none **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first",
+        "inline-end": "order-last",
+        "block-start":
+          "order-first w-full justify-start pt-3 group-has-[>input]/input-group:pt-3.5 [.border-b]:pb-3.5",
+        "block-end":
+          "order-last w-full justify-start pb-3 group-has-[>input]/input-group:pb-3.5 [.border-t]:pt-3.5",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 rounded-none text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-none px-1.5 text-xs [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs": "size-6 p-0 text-xs has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
+  VariantProps<typeof inputGroupButtonVariants> & {
+    type?: "button" | "submit" | "reset"
+  }) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 border-0 bg-transparent ring-0 group-has-[>[data-align=inline-end]]/input-group:pr-2 group-has-[>[data-align=inline-start]]/input-group:pl-2 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none border-0 bg-transparent py-2.5 ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}
diff --git a/apps/v4/styles/base-sera/ui/input-otp.tsx b/apps/v4/styles/base-sera/ui/input-otp.tsx
new file mode 100644
index 0000000000..61d61ef29f
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/input-otp.tsx
@@ -0,0 +1,86 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { MinusIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        "cn-input-otp flex items-center has-disabled:opacity-50",
+        containerClassName
+      )}
+      spellCheck={false}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn(
+        "flex items-center gap-1 rounded-none has-aria-invalid:border-b-destructive dark:has-aria-invalid:border-b-destructive/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  index: number
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        "relative flex size-10 items-center justify-center border border-transparent border-b-input bg-transparent text-sm transition-[color,border-color] outline-none first:rounded-none last:rounded-none aria-invalid:border-b-destructive data-[active=true]:z-10 data-[active=true]:border-b-ring dark:aria-invalid:border-b-destructive/50",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-separator"
+      className="flex items-center [&_svg:not([class*='size-'])]:size-4"
+      role="separator"
+      {...props}
+    >
+      <MinusIcon />
+    </div>
+  )
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/apps/v4/styles/base-sera/ui/input.tsx b/apps/v4/styles/base-sera/ui/input.tsx
new file mode 100644
index 0000000000..36d7b6d966
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/input.tsx
@@ -0,0 +1,20 @@
+import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-10 w-full min-w-0 border border-transparent border-b-input bg-transparent px-0 py-1 text-base transition-[color,border-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-b-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive md:text-sm dark:aria-invalid:border-b-destructive/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/apps/v4/styles/base-sera/ui/item.tsx b/apps/v4/styles/base-sera/ui/item.tsx
new file mode 100644
index 0000000000..53d9171247
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/item.tsx
@@ -0,0 +1,201 @@
+import * as React from "react"
+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 { cn } from "@/lib/utils"
+import { Separator } from "@/styles/base-sera/ui/separator"
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn(
+        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn("my-2", className)}
+      {...props}
+    />
+  )
+}
+
+const itemVariants = cva(
+  "group/item flex w-full flex-wrap items-center rounded-none border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        outline: "border-border",
+        muted: "border-transparent bg-muted/50",
+      },
+      size: {
+        default: "gap-3.5 px-4 py-3.5",
+        sm: "gap-3.5 px-3.5 py-3",
+        xs: "gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(itemVariants({ variant, size, className })),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "item",
+      variant,
+      size,
+    },
+  })
+}
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 overflow-hidden rounded-none group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 group-data-[size=xs]/item:rounded-none [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0.5 [&+[data-slot=item-content]]:flex-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        "cn-font-heading line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-semibold tracking-wide underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        "line-clamp-2 text-left text-sm leading-relaxed font-normal text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+}
diff --git a/apps/v4/styles/base-sera/ui/kbd.tsx b/apps/v4/styles/base-sera/ui/kbd.tsx
new file mode 100644
index 0000000000..876026c36c
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/kbd.tsx
@@ -0,0 +1,26 @@
+import { cn } from "@/lib/utils"
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "pointer-events-none inline-flex h-5.5 w-fit min-w-5.5 items-center justify-center gap-1 rounded-none bg-muted px-1.5 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=input-group]:bg-input in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }
diff --git a/apps/v4/styles/base-sera/ui/label.tsx b/apps/v4/styles/base-sera/ui/label.tsx
new file mode 100644
index 0000000000..8b8754961e
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/label.tsx
@@ -0,0 +1,20 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-xs leading-relaxed font-semibold tracking-wide uppercase select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[slot=checkbox]:text-sm peer-data-[slot=checkbox]:font-medium peer-data-[slot=checkbox]:tracking-normal peer-data-[slot=checkbox]:normal-case peer-data-[slot=radio]:text-sm peer-data-[slot=radio]:font-medium peer-data-[slot=radio]:tracking-normal peer-data-[slot=radio]:normal-case",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/apps/v4/styles/base-sera/ui/menubar.tsx b/apps/v4/styles/base-sera/ui/menubar.tsx
new file mode 100644
index 0000000000..9c7c8bb505
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/menubar.tsx
@@ -0,0 +1,284 @@
+"use client"
+
+import * as React from "react"
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/styles/base-sera/ui/dropdown-menu"
+
+function Menubar({ className, ...props }: MenubarPrimitive.Props) {
+  return (
+    <MenubarPrimitive
+      data-slot="menubar"
+      className={cn(
+        "flex h-10 items-center rounded-none border p-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {
+  return <DropdownMenu data-slot="menubar-menu" {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuGroup>) {
+  return <DropdownMenuGroup data-slot="menubar-group" {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPortal>) {
+  return <DropdownMenuPortal data-slot="menubar-portal" {...props} />
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuTrigger>) {
+  return (
+    <DropdownMenuTrigger
+      data-slot="menubar-trigger"
+      className={cn(
+        "flex items-center rounded-none px-2 py-0.75 text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+  return (
+    <DropdownMenuContent
+      data-slot="menubar-content"
+      align={align}
+      alignOffset={alignOffset}
+      sideOffset={sideOffset}
+      className={cn(
+        "cn-menu-target cn-menu-translucent min-w-48 rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuItem>) {
+  return (
+    <DropdownMenuItem
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/menubar-item gap-2.5 rounded-none px-3 py-2 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-3 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {
+  return <DropdownMenuRadioGroup data-slot="menubar-radio-group" {...props} />
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-3 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenuPrimitive.RadioItemIndicator>
+          <CheckIcon />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuLabel> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuLabel
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn(
+        "px-3.5 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase data-inset:pl-9.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuSeparator>) {
+  return (
+    <DropdownMenuSeparator
+      data-slot="menubar-separator"
+      className={cn("-mx-1 my-1 h-px bg-border/50", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuShortcut>) {
+  return (
+    <DropdownMenuShortcut
+      data-slot="menubar-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuSub>) {
+  return <DropdownMenuSub data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuSubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "gap-2 rounded-none px-3 py-2 text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuSubContent>) {
+  return (
+    <DropdownMenuSubContent
+      data-slot="menubar-sub-content"
+      className={cn(
+        "cn-menu-target cn-menu-translucent min-w-32 rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}
diff --git a/apps/v4/styles/base-sera/ui/native-select.tsx b/apps/v4/styles/base-sera/ui/native-select.tsx
new file mode 100644
index 0000000000..5747d29c0b
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/native-select.tsx
@@ -0,0 +1,65 @@
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
+  size?: "sm" | "default"
+}
+
+function NativeSelect({
+  className,
+  size = "default",
+  ...props
+}: NativeSelectProps) {
+  return (
+    <div
+      className={cn(
+        "group/native-select relative w-fit has-[select:disabled]:opacity-50",
+        className
+      )}
+      data-slot="native-select-wrapper"
+      data-size={size}
+    >
+      <select
+        data-slot="native-select"
+        data-size={size}
+        className="h-10 w-full min-w-0 appearance-none rounded-none border border-transparent border-b-input bg-transparent py-2 pr-8 pl-0 text-sm transition-[color,border-color] outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-b-ring disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-b-destructive data-[size=sm]:h-9 dark:aria-invalid:border-b-destructive/50"
+        {...props}
+      />
+      <ChevronDownIcon
+        className="pointer-events-none absolute top-1/2 right-0 size-4 -translate-y-1/2 text-muted-foreground select-none"
+        aria-hidden="true"
+        data-slot="native-select-icon"
+      />
+    </div>
+  )
+}
+
+function NativeSelectOption({
+  className,
+  ...props
+}: React.ComponentProps<"option">) {
+  return (
+    <option
+      data-slot="native-select-option"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
+}
+
+function NativeSelectOptGroup({
+  className,
+  ...props
+}: React.ComponentProps<"optgroup">) {
+  return (
+    <optgroup
+      data-slot="native-select-optgroup"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
+}
+
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption }
diff --git a/apps/v4/styles/base-sera/ui/navigation-menu.tsx b/apps/v4/styles/base-sera/ui/navigation-menu.tsx
new file mode 100644
index 0000000000..e3ac4d2354
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/navigation-menu.tsx
@@ -0,0 +1,171 @@
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function NavigationMenu({
+  align = "start",
+  className,
+  children,
+  ...props
+}: NavigationMenuPrimitive.Root.Props &
+  Pick<NavigationMenuPrimitive.Positioner.Props, "align">) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <NavigationMenuPositioner align={align} />
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-none px-4.5 py-2.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: NavigationMenuPrimitive.Trigger.Props) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        className="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: NavigationMenuPrimitive.Content.Props) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-2.5 pr-3 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow-md group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuPositioner({
+  className,
+  side = "bottom",
+  sideOffset = 8,
+  align = "start",
+  alignOffset = 0,
+  ...props
+}: NavigationMenuPrimitive.Positioner.Props) {
+  return (
+    <NavigationMenuPrimitive.Portal>
+      <NavigationMenuPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        className={cn(
+          "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0",
+          className
+        )}
+        {...props}
+      >
+        <NavigationMenuPrimitive.Popup className="data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0">
+          <NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
+        </NavigationMenuPrimitive.Popup>
+      </NavigationMenuPrimitive.Positioner>
+    </NavigationMenuPrimitive.Portal>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: NavigationMenuPrimitive.Link.Props) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "flex items-center gap-1.5 rounded-none p-3 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none data-[active=true]:bg-muted/50 data-[active=true]:hover:bg-muted data-[active=true]:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>) {
+  return (
+    <NavigationMenuPrimitive.Icon
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
+        className
+      )}
+      {...props}
+    >
+      <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-none bg-border shadow-md" />
+    </NavigationMenuPrimitive.Icon>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+  NavigationMenuPositioner,
+}
diff --git a/apps/v4/styles/base-sera/ui/pagination.tsx b/apps/v4/styles/base-sera/ui/pagination.tsx
new file mode 100644
index 0000000000..eb9c585041
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/pagination.tsx
@@ -0,0 +1,133 @@
+import * as React from "react"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/styles/base-sera/ui/button"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <Button
+      variant={isActive ? "outline" : "ghost"}
+      size={size}
+      className={cn(className)}
+      nativeButton={false}
+      render={
+        <a
+          aria-current={isActive ? "page" : undefined}
+          data-slot="pagination-link"
+          data-active={isActive}
+          {...props}
+        />
+      }
+    />
+  )
+}
+
+function PaginationPrevious({
+  className,
+  text = "Previous",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("pl-2!", className)}
+      {...props}
+    >
+      <ChevronLeftIcon data-icon="inline-start" className="cn-rtl-flip" />
+      <span className="hidden sm:block">{text}</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  text = "Next",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("pr-2!", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">{text}</span>
+      <ChevronRightIcon data-icon="inline-end" className="cn-rtl-flip" />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn(
+        "flex size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}
diff --git a/apps/v4/styles/base-sera/ui/popover.tsx b/apps/v4/styles/base-sera/ui/popover.tsx
new file mode 100644
index 0000000000..9cfd4b1f46
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/popover.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({ ...props }: PopoverPrimitive.Root.Props) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  ...props
+}: PopoverPrimitive.Popup.Props &
+  Pick<
+    PopoverPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <PopoverPrimitive.Popup
+          data-slot="popover-content"
+          className={cn(
+            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-none bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        />
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-1 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
+  return (
+    <PopoverPrimitive.Title
+      data-slot="popover-title"
+      className={cn(
+        "cn-font-heading text-sm font-semibold tracking-wide",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: PopoverPrimitive.Description.Props) {
+  return (
+    <PopoverPrimitive.Description
+      data-slot="popover-description"
+      className={cn(
+        "mt-0.5 text-sm leading-relaxed text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+}
diff --git a/apps/v4/styles/base-sera/ui/progress.tsx b/apps/v4/styles/base-sera/ui/progress.tsx
new file mode 100644
index 0000000000..be02babc70
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/progress.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  children,
+  value,
+  ...props
+}: ProgressPrimitive.Root.Props) {
+  return (
+    <ProgressPrimitive.Root
+      value={value}
+      data-slot="progress"
+      className={cn("flex flex-wrap gap-3", className)}
+      {...props}
+    >
+      {children}
+      <ProgressTrack>
+        <ProgressIndicator />
+      </ProgressTrack>
+    </ProgressPrimitive.Root>
+  )
+}
+
+function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
+  return (
+    <ProgressPrimitive.Track
+      className={cn(
+        "relative flex h-0.5 w-full items-center overflow-x-hidden rounded-none bg-muted",
+        className
+      )}
+      data-slot="progress-track"
+      {...props}
+    />
+  )
+}
+
+function ProgressIndicator({
+  className,
+  ...props
+}: ProgressPrimitive.Indicator.Props) {
+  return (
+    <ProgressPrimitive.Indicator
+      data-slot="progress-indicator"
+      className={cn("h-full bg-primary transition-all", className)}
+      {...props}
+    />
+  )
+}
+
+function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
+  return (
+    <ProgressPrimitive.Label
+      className={cn("text-xs font-semibold tracking-wide uppercase", className)}
+      data-slot="progress-label"
+      {...props}
+    />
+  )
+}
+
+function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
+  return (
+    <ProgressPrimitive.Value
+      className={cn(
+        "ml-auto text-sm text-muted-foreground tabular-nums",
+        className
+      )}
+      data-slot="progress-value"
+      {...props}
+    />
+  )
+}
+
+export {
+  Progress,
+  ProgressTrack,
+  ProgressIndicator,
+  ProgressLabel,
+  ProgressValue,
+}
diff --git a/apps/v4/styles/base-sera/ui/radio-group.tsx b/apps/v4/styles/base-sera/ui/radio-group.tsx
new file mode 100644
index 0000000000..d9752acdcc
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/radio-group.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import { Radio as RadioPrimitive } from "@base-ui/react/radio"
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"
+
+import { cn } from "@/lib/utils"
+
+function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
+  return (
+    <RadioGroupPrimitive
+      data-slot="radio-group"
+      className={cn("grid w-full gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
+  return (
+    <RadioPrimitive.Root
+      data-slot="radio-group-item"
+      className={cn(
+        "group/radio-group-item peer relative flex aspect-square size-4.5 shrink-0 rounded-full border border-input bg-transparent outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-foreground dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-foreground",
+        className
+      )}
+      {...props}
+    >
+      <RadioPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="flex size-4.5 items-center justify-center"
+      >
+        <span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-foreground" />
+      </RadioPrimitive.Indicator>
+    </RadioPrimitive.Root>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }
diff --git a/apps/v4/styles/base-sera/ui/resizable.tsx b/apps/v4/styles/base-sera/ui/resizable.tsx
new file mode 100644
index 0000000000..9656a8fab6
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/resizable.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: ResizablePrimitive.GroupProps) {
+  return (
+    <ResizablePrimitive.Group
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full aria-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: ResizablePrimitive.SeparatorProps & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.Separator
+      data-slot="resizable-handle"
+      className={cn(
+        "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="z-10 flex h-6 w-1 shrink-0 rounded-none bg-border" />
+      )}
+    </ResizablePrimitive.Separator>
+  )
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
diff --git a/apps/v4/styles/base-sera/ui/scroll-area.tsx b/apps/v4/styles/base-sera/ui/scroll-area.tsx
new file mode 100644
index 0000000000..c54aab9f02
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/scroll-area.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: ScrollAreaPrimitive.Root.Props) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: ScrollAreaPrimitive.Scrollbar.Props) {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Thumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-none bg-border"
+      />
+    </ScrollAreaPrimitive.Scrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
diff --git a/apps/v4/styles/base-sera/ui/select.tsx b/apps/v4/styles/base-sera/ui/select.tsx
new file mode 100644
index 0000000000..c2686beeb5
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/select.tsx
@@ -0,0 +1,208 @@
+"use client"
+
+import * as React from "react"
+import { Select as SelectPrimitive } from "@base-ui/react/select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1.5 p-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return (
+    <SelectPrimitive.Value
+      data-slot="select-value"
+      className={cn("flex flex-1 text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: SelectPrimitive.Trigger.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-none border border-transparent border-b-input bg-transparent px-0 py-2 text-sm whitespace-nowrap transition-[color,border-color] outline-none focus-visible:border-b-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive data-placeholder:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-b-destructive/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        render={
+          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+        }
+      />
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}: SelectPrimitive.Popup.Props &
+  Pick<
+    SelectPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+  >) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        alignItemWithTrigger={alignItemWithTrigger}
+        className="isolate z-50"
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          data-align-trigger={alignItemWithTrigger}
+          className={cn(
+            "cn-menu-target cn-menu-translucent relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.GroupLabel.Props) {
+  return (
+    <SelectPrimitive.GroupLabel
+      data-slot="select-label"
+      className={cn(
+        "px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+        {children}
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.Separator.Props) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn(
+        "pointer-events-none -mx-1.5 my-1.5 h-px bg-border",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon />
+    </SelectPrimitive.ScrollUpArrow>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon />
+    </SelectPrimitive.ScrollDownArrow>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/apps/v4/styles/base-sera/ui/separator.tsx b/apps/v4/styles/base-sera/ui/separator.tsx
new file mode 100644
index 0000000000..6e1369e43c
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/separator.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/apps/v4/styles/base-sera/ui/sheet.tsx b/apps/v4/styles/base-sera/ui/sheet.tsx
new file mode 100644
index 0000000000..ca4fd3ee57
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/sheet.tsx
@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/styles/base-sera/ui/button"
+
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+  return (
+    <SheetPrimitive.Backdrop
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: SheetPrimitive.Popup.Props & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Popup
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col bg-popover bg-clip-padding text-sm text-popover-foreground shadow-md transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close
+            data-slot="sheet-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-4 right-4 bg-secondary"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Popup>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-8", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-8", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn(
+        "cn-font-heading text-lg tracking-wider text-foreground uppercase",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: SheetPrimitive.Description.Props) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn(
+        "mt-0.5 text-sm leading-relaxed text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/apps/v4/styles/base-sera/ui/sidebar.tsx b/apps/v4/styles/base-sera/ui/sidebar.tsx
new file mode 100644
index 0000000000..626fe5649d
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/sidebar.tsx
@@ -0,0 +1,726 @@
+"use client"
+
+import * as React from "react"
+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 { PanelLeftIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { useIsMobile } from "@/hooks/use-mobile"
+import { Button } from "@/styles/base-sera/ui/button"
+import { Input } from "@/styles/base-sera/ui/input"
+import { Separator } from "@/styles/base-sera/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/styles/base-sera/ui/sheet"
+import { Skeleton } from "@/styles/base-sera/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/styles/base-sera/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <div
+        data-slot="sidebar-wrapper"
+        style={
+          {
+            "--sidebar-width": SIDEBAR_WIDTH,
+            "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+            ...style,
+          } as React.CSSProperties
+        }
+        className={cn(
+          "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  dir,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          dir={dir}
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer hidden text-sidebar-foreground md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        data-side={side}
+        className={cn(
+          "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",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon-sm"
+      className={cn(className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon className="cn-rtl-flip" />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "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] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "relative flex w-full flex-1 flex-col 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",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn(
+        "h-8 w-full border-input bg-transparent shadow-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2 [--radius:0]", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto [--radius:0] group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div"> & React.ComponentProps<"div">) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(
+          "flex h-8 shrink-0 items-center rounded-none px-3 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden 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 [&>svg]:shrink-0",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-group-label",
+      sidebar: "group-label",
+    },
+  })
+}
+
+function SidebarGroupAction({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"button"> & React.ComponentProps<"button">) {
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(
+          "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-group-action",
+      sidebar: "group-action",
+    },
+  })
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-0.5", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-none px-3 py-2 text-left text-sm ring-sidebar-ring outline-hidden 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! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-9 text-sm",
+        sm: "h-8 text-xs",
+        lg: "h-14 px-3 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  render,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: useRender.ComponentProps<"button"> &
+  React.ComponentProps<"button"> & {
+    isActive?: boolean
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  } & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const { isMobile, state } = useSidebar()
+  const comp = useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+      },
+      props
+    ),
+    render: !tooltip ? render : <TooltipTrigger render={render} />,
+    state: {
+      slot: "sidebar-menu-button",
+      sidebar: "menu-button",
+      size,
+      active: isActive,
+    },
+  })
+
+  if (!tooltip) {
+    return comp
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      {comp}
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  render,
+  showOnHover = false,
+  ...props
+}: useRender.ComponentProps<"button"> &
+  React.ComponentProps<"button"> & {
+    showOnHover?: boolean
+  }) {
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(
+          "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground 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 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+          showOnHover &&
+            "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-menu-action",
+      sidebar: "menu-action",
+    },
+  })
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-none px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground 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 peer-data-active/menu-button:text-sidebar-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const [width] = React.useState(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  })
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-none px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-none"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  render,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: useRender.ComponentProps<"a"> &
+  React.ComponentProps<"a"> & {
+    size?: "sm" | "md"
+    isActive?: boolean
+  }) {
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps<"a">(
+      {
+        className: cn(
+          "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-none px-3 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-menu-sub-button",
+      sidebar: "menu-sub-button",
+      size,
+      active: isActive,
+    },
+  })
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
diff --git a/apps/v4/styles/base-sera/ui/skeleton.tsx b/apps/v4/styles/base-sera/ui/skeleton.tsx
new file mode 100644
index 0000000000..f6c649be42
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/apps/v4/styles/base-sera/ui/slider.tsx b/apps/v4/styles/base-sera/ui/slider.tsx
new file mode 100644
index 0000000000..d5b3c08bd1
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/slider.tsx
@@ -0,0 +1,52 @@
+import { Slider as SliderPrimitive } from "@base-ui/react/slider"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: SliderPrimitive.Root.Props) {
+  const _values = Array.isArray(value)
+    ? value
+    : Array.isArray(defaultValue)
+      ? defaultValue
+      : [min, max]
+
+  return (
+    <SliderPrimitive.Root
+      className={cn("data-horizontal:w-full data-vertical:h-full", className)}
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      thumbAlignment="edge"
+      {...props}
+    >
+      <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">
+        <SliderPrimitive.Track
+          data-slot="slider-track"
+          className="relative grow overflow-hidden bg-input/50 select-none data-horizontal:h-0.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-0.5"
+        >
+          <SliderPrimitive.Indicator
+            data-slot="slider-range"
+            className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+          />
+        </SliderPrimitive.Track>
+        {Array.from({ length: _values.length }, (_, index) => (
+          <SliderPrimitive.Thumb
+            data-slot="slider-thumb"
+            key={index}
+            className="block size-3 shrink-0 border-none bg-primary transition-colors select-none hover:ring-2 hover:ring-ring/30 focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+          />
+        ))}
+      </SliderPrimitive.Control>
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }
diff --git a/apps/v4/styles/base-sera/ui/sonner.tsx b/apps/v4/styles/base-sera/ui/sonner.tsx
new file mode 100644
index 0000000000..c7965f834e
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/sonner.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/apps/v4/styles/base-sera/ui/spinner.tsx b/apps/v4/styles/base-sera/ui/spinner.tsx
new file mode 100644
index 0000000000..a70e713c5b
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/spinner.tsx
@@ -0,0 +1,16 @@
+import { Loader2Icon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }
diff --git a/apps/v4/styles/base-sera/ui/switch.tsx b/apps/v4/styles/base-sera/ui/switch.tsx
new file mode 100644
index 0000000000..f52d2430d2
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/switch.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: SwitchPrimitive.Root.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-none border transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-[size=default]:h-4.5 data-[size=default]:w-8.25 data-[size=sm]:h-3.5 data-[size=sm]:w-6.25 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-unchecked:border-input/50 data-unchecked:bg-input data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block bg-background ring-0 transition-transform group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-2.5 data-checked:translate-x-[calc(100%+2px)] dark:data-checked:bg-primary-foreground data-unchecked:translate-x-0.25 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
diff --git a/apps/v4/styles/base-sera/ui/table.tsx b/apps/v4/styles/base-sera/ui/table.tsx
new file mode 100644
index 0000000000..6c0e3e8d69
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/table.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-12 px-3 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/apps/v4/styles/base-sera/ui/tabs.tsx b/apps/v4/styles/base-sera/ui/tabs.tsx
new file mode 100644
index 0000000000..d4a859132b
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/tabs.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center p-1 text-muted-foreground group-data-horizontal/tabs:h-10 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-4 group-data-vertical/tabs:py-2 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
diff --git a/apps/v4/styles/base-sera/ui/textarea.tsx b/apps/v4/styles/base-sera/ui/textarea.tsx
new file mode 100644
index 0000000000..642ea88051
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full resize-none rounded-none border border-transparent border-b-input bg-transparent px-0 py-3 text-base transition-[color,border-color] outline-none placeholder:text-muted-foreground focus-visible:border-b-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive md:text-sm dark:aria-invalid:border-b-destructive/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/apps/v4/styles/base-sera/ui/toggle-group.tsx b/apps/v4/styles/base-sera/ui/toggle-group.tsx
new file mode 100644
index 0000000000..df7000d89a
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/toggle-group.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/styles/base-sera/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+  orientation: "horizontal",
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  orientation = "horizontal",
+  children,
+  ...props
+}: ToggleGroupPrimitive.Props &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }) {
+  return (
+    <ToggleGroupPrimitive
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      data-orientation={orientation}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[spacing=0]:data-[variant=outline]:rounded-none data-vertical:flex-col data-vertical:items-stretch",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider
+        value={{ variant, size, spacing, orientation }}
+      >
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <TogglePrimitive
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-6 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-4 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-4 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-none group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-none data-[state=on]:bg-muted data-[state=on]:text-foreground group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </TogglePrimitive>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/apps/v4/styles/base-sera/ui/toggle.tsx b/apps/v4/styles/base-sera/ui/toggle.tsx
new file mode 100644
index 0000000000..cdf48a89f7
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/toggle.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "group/toggle inline-flex items-center justify-center gap-1.5 rounded-none text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-muted",
+      },
+      size: {
+        default:
+          "h-10 min-w-10 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
+        sm: "h-9 min-w-9 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        lg: "h-11 min-w-11 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }
diff --git a/apps/v4/styles/base-sera/ui/tooltip.tsx b/apps/v4/styles/base-sera/ui/tooltip.tsx
new file mode 100644
index 0000000000..dc610505a6
--- /dev/null
+++ b/apps/v4/styles/base-sera/ui/tooltip.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-none bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-none data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-none bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:translate-x-[1.5px] data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:translate-x-[-1.5px] data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/apps/v4/styles/base-vega/ui/field.tsx b/apps/v4/styles/base-vega/ui/field.tsx
index 67e33e8eef..61ebf56a5c 100644
--- a/apps/v4/styles/base-vega/ui/field.tsx
+++ b/apps/v4/styles/base-vega/ui/field.tsx
@@ -120,7 +120,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-label"
       className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/radix-luma/ui/button-group.tsx b/apps/v4/styles/radix-luma/ui/button-group.tsx
index 67f0f492d8..6f544d660f 100644
--- a/apps/v4/styles/radix-luma/ui/button-group.tsx
+++ b/apps/v4/styles/radix-luma/ui/button-group.tsx
@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils"
 import { Separator } from "@/styles/radix-luma/ui/separator"
 
 const buttonGroupVariants = cva(
-  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-border has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-border has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-ring has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-ring has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-4xl [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:[&>input]:border-border has-[>[data-variant=outline]]:[&>input:focus-visible]:border-ring",
+  "group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-border has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-border has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-ring has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-ring has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-4xl [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:[&>input]:border-border has-[>[data-variant=outline]]:[&>input:focus-visible]:border-ring",
   {
     variants: {
       orientation: {
diff --git a/apps/v4/styles/radix-luma/ui/field.tsx b/apps/v4/styles/radix-luma/ui/field.tsx
index f8b7d79e72..85f9dcf39b 100644
--- a/apps/v4/styles/radix-luma/ui/field.tsx
+++ b/apps/v4/styles/radix-luma/ui/field.tsx
@@ -120,7 +120,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-label"
       className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/radix-lyra/ui/button-group.tsx b/apps/v4/styles/radix-lyra/ui/button-group.tsx
index f22d1620f3..f29c3c0a93 100644
--- a/apps/v4/styles/radix-lyra/ui/button-group.tsx
+++ b/apps/v4/styles/radix-lyra/ui/button-group.tsx
@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils"
 import { Separator } from "@/styles/radix-lyra/ui/separator"
 
 const buttonGroupVariants = cva(
-  "flex w-fit items-stretch rounded-none *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  "group/button-group flex w-fit items-stretch rounded-none *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
     variants: {
       orientation: {
diff --git a/apps/v4/styles/radix-lyra/ui/field.tsx b/apps/v4/styles/radix-lyra/ui/field.tsx
index 8ce09d1234..4fa4dfc222 100644
--- a/apps/v4/styles/radix-lyra/ui/field.tsx
+++ b/apps/v4/styles/radix-lyra/ui/field.tsx
@@ -120,7 +120,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-label"
       className={cn(
-        "flex w-fit items-center gap-2 text-xs/relaxed leading-snug group-data-[disabled=true]/field:opacity-50",
+        "flex w-fit items-center gap-2 text-xs/relaxed group-data-[disabled=true]/field:opacity-50",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/radix-maia/ui/button-group.tsx b/apps/v4/styles/radix-maia/ui/button-group.tsx
index cd363989f9..7a34244eba 100644
--- a/apps/v4/styles/radix-maia/ui/button-group.tsx
+++ b/apps/v4/styles/radix-maia/ui/button-group.tsx
@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils"
 import { Separator } from "@/styles/radix-maia/ui/separator"
 
 const buttonGroupVariants = cva(
-  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-4xl [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  "group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-4xl [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
     variants: {
       orientation: {
diff --git a/apps/v4/styles/radix-maia/ui/field.tsx b/apps/v4/styles/radix-maia/ui/field.tsx
index 538242154d..8a3761fe74 100644
--- a/apps/v4/styles/radix-maia/ui/field.tsx
+++ b/apps/v4/styles/radix-maia/ui/field.tsx
@@ -120,7 +120,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-label"
       className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/radix-mira/ui/button-group.tsx b/apps/v4/styles/radix-mira/ui/button-group.tsx
index ab8f8fb467..50f170bab6 100644
--- a/apps/v4/styles/radix-mira/ui/button-group.tsx
+++ b/apps/v4/styles/radix-mira/ui/button-group.tsx
@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils"
 import { Separator } from "@/styles/radix-mira/ui/separator"
 
 const buttonGroupVariants = cva(
-  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  "group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
     variants: {
       orientation: {
diff --git a/apps/v4/styles/radix-mira/ui/field.tsx b/apps/v4/styles/radix-mira/ui/field.tsx
index fb3cf7f501..c8d848be89 100644
--- a/apps/v4/styles/radix-mira/ui/field.tsx
+++ b/apps/v4/styles/radix-mira/ui/field.tsx
@@ -120,7 +120,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-label"
       className={cn(
-        "flex w-fit items-center gap-2 text-xs/relaxed leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        "flex w-fit items-center gap-2 text-xs/relaxed font-medium group-data-[disabled=true]/field:opacity-50",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/radix-nova/ui-rtl/button-group.tsx b/apps/v4/styles/radix-nova/ui-rtl/button-group.tsx
index 464a8d0eb5..e24025498e 100644
--- a/apps/v4/styles/radix-nova/ui-rtl/button-group.tsx
+++ b/apps/v4/styles/radix-nova/ui-rtl/button-group.tsx
@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils"
 import { Separator } from "@/styles/radix-nova/ui-rtl/separator"
 
 const buttonGroupVariants = cva(
-  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  "group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
     variants: {
       orientation: {
diff --git a/apps/v4/styles/radix-nova/ui-rtl/field.tsx b/apps/v4/styles/radix-nova/ui-rtl/field.tsx
index 7babb4b00d..49809418ca 100644
--- a/apps/v4/styles/radix-nova/ui-rtl/field.tsx
+++ b/apps/v4/styles/radix-nova/ui-rtl/field.tsx
@@ -120,7 +120,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-label"
       className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/radix-nova/ui/button-group.tsx b/apps/v4/styles/radix-nova/ui/button-group.tsx
index 7178902a82..29b4c50ee9 100644
--- a/apps/v4/styles/radix-nova/ui/button-group.tsx
+++ b/apps/v4/styles/radix-nova/ui/button-group.tsx
@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils"
 import { Separator } from "@/styles/radix-nova/ui/separator"
 
 const buttonGroupVariants = cva(
-  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  "group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
     variants: {
       orientation: {
diff --git a/apps/v4/styles/radix-nova/ui/field.tsx b/apps/v4/styles/radix-nova/ui/field.tsx
index 80b3dc30d9..ea84f96892 100644
--- a/apps/v4/styles/radix-nova/ui/field.tsx
+++ b/apps/v4/styles/radix-nova/ui/field.tsx
@@ -120,7 +120,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-label"
       className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/radix-sera/ui/accordion.tsx b/apps/v4/styles/radix-sera/ui/accordion.tsx
new file mode 100644
index 0000000000..0a9e021b08
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/accordion.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 rounded-none border border-transparent py-4 text-left text-sm font-semibold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <ChevronUpIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--radix-accordion-content-height) pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/apps/v4/styles/radix-sera/ui/alert-dialog.tsx b/apps/v4/styles/radix-sera/ui/alert-dialog.tsx
new file mode 100644
index 0000000000..31b9ca28bb
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/alert-dialog.tsx
@@ -0,0 +1,199 @@
+"use client"
+
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/styles/radix-sera/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/20 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-none bg-popover p-6 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-2 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-16 items-center justify-center rounded-none bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "cn-font-heading text-lg tracking-wider uppercase sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "mt-0.5 text-sm leading-relaxed text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}
diff --git a/apps/v4/styles/radix-sera/ui/alert.tsx b/apps/v4/styles/radix-sera/ui/alert.tsx
new file mode 100644
index 0000000000..1c2ff0862f
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/alert.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-1 border bg-background px-4 py-3 text-left text-sm after:absolute after:-inset-y-px after:-left-px after:w-0.5 has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground after:bg-foreground",
+        destructive:
+          "bg-card text-destructive after:bg-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "cn-font-heading font-sans font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2.5 right-3", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }
diff --git a/apps/v4/styles/radix-sera/ui/aspect-ratio.tsx b/apps/v4/styles/radix-sera/ui/aspect-ratio.tsx
new file mode 100644
index 0000000000..57e38fa96f
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/aspect-ratio.tsx
@@ -0,0 +1,11 @@
+"use client"
+
+import { AspectRatio as AspectRatioPrimitive } from "radix-ui"
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+}
+
+export { AspectRatio }
diff --git a/apps/v4/styles/radix-sera/ui/avatar.tsx b/apps/v4/styles/radix-sera/ui/avatar.tsx
new file mode 100644
index 0000000000..47ff2e2f44
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/avatar.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn(
+        "aspect-square size-full rounded-full object-cover",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+}
diff --git a/apps/v4/styles/radix-sera/ui/badge.tsx b/apps/v4/styles/radix-sera/ui/badge.tsx
new file mode 100644
index 0000000000..fe670e932d
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/badge.tsx
@@ -0,0 +1,49 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-none border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/apps/v4/styles/radix-sera/ui/breadcrumb.tsx b/apps/v4/styles/radix-sera/ui/breadcrumb.tsx
new file mode 100644
index 0000000000..c62e27f10f
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/breadcrumb.tsx
@@ -0,0 +1,119 @@
+import * as React from "react"
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      aria-label="breadcrumb"
+      data-slot="breadcrumb"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRightIcon className="cn-rtl-flip" />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn(
+        "flex size-5 items-center justify-center [&>svg]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
diff --git a/apps/v4/styles/radix-sera/ui/button-group.tsx b/apps/v4/styles/radix-sera/ui/button-group.tsx
new file mode 100644
index 0000000000..2b0585dc45
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/button-group.tsx
@@ -0,0 +1,83 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/styles/radix-sera/ui/separator"
+
+const buttonGroupVariants = cva(
+  "group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 *:data-[slot=input]:px-4 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-border has-[>[data-variant=outline]]:*:data-[slot=input-group]:px-2.5 has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-border has-[>[data-variant=outline]]:*:[[role=combobox]]:px-2.5 has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-ring has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-ring has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:[&>input]:border-border has-[>[data-variant=outline]]:[&>input:focus-visible]:border-ring",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none!",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none!",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      className={cn(
+        "flex items-center gap-2 border border-transparent border-b-input bg-transparent px-2.5 text-xs font-semibold uppercase group-has-[>[data-variant=outline]]/button-group:border-border [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}
diff --git a/apps/v4/styles/radix-sera/ui/button.tsx b/apps/v4/styles/radix-sera/ui/button.tsx
new file mode 100644
index 0000000000..90e9800bd4
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/button.tsx
@@ -0,0 +1,65 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-transparent hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-input/30",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-10 gap-1.5 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
+        xs: "h-7 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-9 gap-1 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        lg: "h-11 gap-1.5 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5",
+        icon: "size-10",
+        "icon-xs": "size-7 [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-9",
+        "icon-lg": "size-11",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/apps/v4/styles/radix-sera/ui/calendar.tsx b/apps/v4/styles/radix-sera/ui/calendar.tsx
new file mode 100644
index 0000000000..e431cb8e58
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/calendar.tsx
@@ -0,0 +1,232 @@
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type DayButton,
+  type Locale,
+} from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/styles/radix-sera/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  locale,
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "group/calendar bg-background p-3 [--cell-radius:0] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      locale={locale}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString(locale?.code, { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "cn-calendar-dropdown-root relative rounded-(--cell-radius)",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute inset-0 bg-popover opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "font-medium select-none",
+          captionLayout === "label"
+            ? "text-sm"
+            : "cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-(--cell-size) select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] text-muted-foreground select-none",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn(
+          "relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_end
+        ),
+        today: cn(
+          "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon
+                className={cn("cn-rtl-flip size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("cn-rtl-flip size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: ({ ...props }) => (
+          <CalendarDayButton locale={locale} {...props} />
+        ),
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  locale,
+  ...props
+}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString(locale?.code)}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }
diff --git a/apps/v4/styles/radix-sera/ui/card.tsx b/apps/v4/styles/radix-sera/ui/card.tsx
new file mode 100644
index 0000000000..bcd713bec6
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/card.tsx
@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-8 overflow-hidden bg-card py-8 text-sm text-card-foreground shadow-sm ring-1 ring-foreground/5 has-[>img:first-child]:pt-0 data-[size=sm]:gap-5 data-[size=sm]:py-5 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1.5 rounded-none px-8 group-data-[size=sm]/card:px-5 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-8 group-data-[size=sm]/card:[.border-b]:pb-5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "cn-font-heading text-lg tracking-wider uppercase",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm leading-relaxed text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-8 group-data-[size=sm]/card:px-5", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center px-8 group-data-[size=sm]/card:px-5 [.border-t]:pt-8 group-data-[size=sm]/card:[.border-t]:pt-5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/apps/v4/styles/radix-sera/ui/carousel.tsx b/apps/v4/styles/radix-sera/ui/carousel.tsx
new file mode 100644
index 0000000000..042fb44523
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/carousel.tsx
@@ -0,0 +1,242 @@
+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/styles/radix-sera/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext]
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute touch-manipulation",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ChevronLeftIcon className="cn-rtl-flip" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute touch-manipulation",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ChevronRightIcon className="cn-rtl-flip" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  useCarousel,
+}
diff --git a/apps/v4/styles/radix-sera/ui/chart.tsx b/apps/v4/styles/radix-sera/ui/chart.tsx
new file mode 100644
index 0000000000..812b9ce9f3
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/chart.tsx
@@ -0,0 +1,373 @@
+"use client"
+
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+import type { TooltipValueType } from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+const INITIAL_DIMENSION = { width: 320, height: 200 } as const
+type TooltipNameType = number | string
+
+export type ChartConfig = Record<
+  string,
+  {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+>
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  initialDimension = INITIAL_DIMENSION,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"]
+  initialDimension?: {
+    width: number
+    height: number
+  }
+}) {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer
+          initialDimension={initialDimension}
+        >
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme ?? config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: "line" | "dot" | "dashed"
+    nameKey?: string
+    labelKey?: string
+  } & Omit<
+    RechartsPrimitive.DefaultTooltipContentProps<
+      TooltipValueType,
+      TooltipNameType
+    >,
+    "accessibilityLayer"
+  >) {
+  const { config } = useChart()
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+
+    const [item] = payload
+    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === "string"
+        ? (config[label]?.label ?? label)
+        : itemConfig?.label
+
+    if (labelFormatter) {
+      return (
+        <div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      )
+    }
+
+    if (!value) {
+      return null
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot"
+
+  return (
+    <div
+      className={cn(
+        "grid min-w-32 items-start gap-1.5 bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-sm ring-1 ring-foreground/10",
+        className
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload
+          .filter((item) => item.type !== "none")
+          .map((item, index) => {
+            const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color ?? item.payload?.fill ?? item.color
+
+            return (
+              <div
+                key={index}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label ?? item.name}
+                        </span>
+                      </div>
+                      {item.value != null && (
+                        <span className="font-mono font-medium text-foreground tabular-nums">
+                          {typeof item.value === "number"
+                            ? item.value.toLocaleString()
+                            : String(item.value)}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+      </div>
+    </div>
+  )
+}
+
+const ChartLegend = RechartsPrimitive.Legend
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: React.ComponentProps<"div"> & {
+  hideIcon?: boolean
+  nameKey?: string
+} & RechartsPrimitive.DefaultLegendContentProps) {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      )}
+    >
+      {payload
+        .filter((item) => item.type !== "none")
+        .map((item, index) => {
+          const key = `${nameKey ?? item.dataKey ?? "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={index}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+    </div>
+  )
+}
+
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}
diff --git a/apps/v4/styles/radix-sera/ui/checkbox.tsx b/apps/v4/styles/radix-sera/ui/checkbox.tsx
new file mode 100644
index 0000000000..f880065275
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/checkbox.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon } from "lucide-react"
+import { Checkbox as CheckboxPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer relative flex size-4.5 shrink-0 items-center justify-center rounded-none border border-input bg-transparent transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+      >
+        <CheckIcon />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
diff --git a/apps/v4/styles/radix-sera/ui/collapsible.tsx b/apps/v4/styles/radix-sera/ui/collapsible.tsx
new file mode 100644
index 0000000000..2f7a4e7fc6
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/collapsible.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import { Collapsible as CollapsiblePrimitive } from "radix-ui"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/apps/v4/styles/radix-sera/ui/combobox.tsx b/apps/v4/styles/radix-sera/ui/combobox.tsx
new file mode 100644
index 0000000000..33896ec90c
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/combobox.tsx
@@ -0,0 +1,305 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react"
+import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/styles/radix-sera/ui/button"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/styles/radix-sera/ui/input-group"
+
+const Combobox = ComboboxPrimitive.Root
+
+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
+}
+
+function ComboboxTrigger({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Trigger.Props) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-trigger"
+      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+    </ComboboxPrimitive.Trigger>
+  )
+}
+
+function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
+  return (
+    <ComboboxPrimitive.Clear
+      data-slot="combobox-clear"
+      render={<InputGroupButton variant="ghost" size="icon-xs" />}
+      className={cn(className)}
+      {...props}
+    >
+      <XIcon className="pointer-events-none" />
+    </ComboboxPrimitive.Clear>
+  )
+}
+
+function ComboboxInput({
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}: ComboboxPrimitive.Input.Props & {
+  showTrigger?: boolean
+  showClear?: boolean
+}) {
+  return (
+    <InputGroup className={cn("w-auto", className)}>
+      <ComboboxPrimitive.Input
+        render={<InputGroupInput disabled={disabled} />}
+        {...props}
+      />
+      <InputGroupAddon align="inline-end">
+        {showTrigger && (
+          <InputGroupButton
+            size="icon-xs"
+            variant="ghost"
+            asChild
+            data-slot="input-group-button"
+            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+            disabled={disabled}
+          >
+            <ComboboxTrigger />
+          </InputGroupButton>
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
+      {children}
+    </InputGroup>
+  )
+}
+
+function ComboboxContent({
+  className,
+  side = "bottom",
+  sideOffset = 6,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  ...props
+}: ComboboxPrimitive.Popup.Props &
+  Pick<
+    ComboboxPrimitive.Positioner.Props,
+    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
+  >) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="isolate z-50"
+      >
+        <ComboboxPrimitive.Popup
+          data-slot="combobox-content"
+          data-chips={!!anchor}
+          className={cn(
+            "cn-menu-target cn-menu-translucent group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1.5 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-transparent *:data-[slot=input-group]:bg-transparent *:data-[slot=input-group]:px-2.5 *:data-[slot=input-group]:focus-within:border-transparent data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  )
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn(
+        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1.5 overflow-y-auto overscroll-contain p-1.5 data-empty:p-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxItem({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Item.Props) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  )
+}
+
+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
+  return (
+    <ComboboxPrimitive.Group
+      data-slot="combobox-group"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxLabel({
+  className,
+  ...props
+}: ComboboxPrimitive.GroupLabel.Props) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot="combobox-label"
+      className={cn(
+        "px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
+  return (
+    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
+  )
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="combobox-empty"
+      className={cn(
+        "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxSeparator({
+  className,
+  ...props
+}: ComboboxPrimitive.Separator.Props) {
+  return (
+    <ComboboxPrimitive.Separator
+      data-slot="combobox-separator"
+      className={cn("-mx-1.5 my-1.5 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChips({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
+  ComboboxPrimitive.Chips.Props) {
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot="combobox-chips"
+      className={cn(
+        "flex min-h-10 flex-wrap items-center gap-1.5 rounded-none border border-transparent border-b-input bg-transparent bg-clip-padding px-0 py-1.5 text-sm transition-[color,border-color] focus-within:border-b-ring has-aria-invalid:border-b-destructive has-data-[slot=combobox-chip]:px-0 dark:has-aria-invalid:border-b-destructive/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChip({
+  className,
+  children,
+  showRemove = true,
+  ...props
+}: ComboboxPrimitive.Chip.Props & {
+  showRemove?: boolean
+}) {
+  return (
+    <ComboboxPrimitive.Chip
+      data-slot="combobox-chip"
+      className={cn(
+        "flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-none bg-muted px-2 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove
+          render={<Button variant="ghost" size="icon-xs" />}
+          className="-ml-1 opacity-50 hover:opacity-100"
+          data-slot="combobox-chip-remove"
+        >
+          <XIcon className="pointer-events-none" />
+        </ComboboxPrimitive.ChipRemove>
+      )}
+    </ComboboxPrimitive.Chip>
+  )
+}
+
+function ComboboxChipsInput({
+  className,
+  ...props
+}: ComboboxPrimitive.Input.Props) {
+  return (
+    <ComboboxPrimitive.Input
+      data-slot="combobox-chip-input"
+      className={cn("min-w-16 flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+function useComboboxAnchor() {
+  return React.useRef<HTMLDivElement | null>(null)
+}
+
+export {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxEmpty,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+}
diff --git a/apps/v4/styles/radix-sera/ui/command.tsx b/apps/v4/styles/radix-sera/ui/command.tsx
new file mode 100644
index 0000000000..256142fa8a
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/command.tsx
@@ -0,0 +1,189 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { CheckIcon, SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/styles/radix-sera/ui/dialog"
+import { InputGroup, InputGroupAddon } from "@/styles/radix-sera/ui/input-group"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "flex size-full flex-col overflow-hidden bg-popover text-popover-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = false,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("top-1/3 translate-y-0 overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        {children}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div data-slot="command-input-wrapper" className="p-1">
+      <InputGroup className="border-transparent border-b-input bg-transparent px-3">
+        <CommandPrimitive.Input
+          data-slot="command-input"
+          className={cn(
+            "w-full px-2 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          )}
+          {...props}
+        />
+        <InputGroupAddon>
+          <SearchIcon className="size-4 shrink-0 opacity-50" />
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className={cn("py-6 text-center text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "overflow-hidden p-1.5 text-foreground **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-[0.625rem] **:[[cmdk-group-heading]]:font-semibold **:[[cmdk-group-heading]]:tracking-wider **:[[cmdk-group-heading]]:text-foreground **:[[cmdk-group-heading]]:uppercase",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("my-1 h-px bg-border/50", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+    </CommandPrimitive.Item>
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/apps/v4/styles/radix-sera/ui/context-menu.tsx b/apps/v4/styles/radix-sera/ui/context-menu.tsx
new file mode 100644
index 0000000000..079961a4a8
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/context-menu.tsx
@@ -0,0 +1,267 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger
+      data-slot="context-menu-trigger"
+      className={cn("select-none", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  )
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  )
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          "cn-menu-target cn-menu-translucent z-50 max-h-(--radix-context-menu-content-available-height) min-w-48 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/context-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="cn-rtl-flip ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        "cn-menu-target cn-menu-translucent z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase data-inset:pl-9.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("-mx-1.5 my-1.5 h-px bg-border/50", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
diff --git a/apps/v4/styles/radix-sera/ui/dialog.tsx b/apps/v4/styles/radix-sera/ui/dialog.tsx
new file mode 100644
index 0000000000..ecade7a28b
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/dialog.tsx
@@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react"
+import { XIcon } from "lucide-react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/styles/radix-sera/ui/button"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/20 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-none bg-popover p-6 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close data-slot="dialog-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-5 right-5 bg-secondary"
+              size="icon-sm"
+            >
+              <XIcon />
+              <span className="sr-only">Close</span>
+            </Button>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "cn-font-heading text-lg leading-none tracking-wider uppercase",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "mt-0.5 text-sm leading-relaxed text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/apps/v4/styles/radix-sera/ui/direction.tsx b/apps/v4/styles/radix-sera/ui/direction.tsx
new file mode 100644
index 0000000000..22e165774b
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/direction.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+import { Direction } from "radix-ui"
+
+function DirectionProvider({
+  dir,
+  direction,
+  children,
+}: React.ComponentProps<typeof Direction.DirectionProvider> & {
+  direction?: React.ComponentProps<typeof Direction.DirectionProvider>["dir"]
+}) {
+  return (
+    <Direction.DirectionProvider dir={direction ?? dir}>
+      {children}
+    </Direction.DirectionProvider>
+  )
+}
+
+const useDirection = Direction.useDirection
+
+export { DirectionProvider, useDirection }
diff --git a/apps/v4/styles/radix-sera/ui/drawer.tsx b/apps/v4/styles/radix-sera/ui/drawer.tsx
new file mode 100644
index 0000000000..9bf36860ac
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/drawer.tsx
@@ -0,0 +1,137 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/20 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground 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=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t 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=left]:rounded-none data-[vaul-drawer-direction=left]:border-r 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=right]:rounded-none data-[vaul-drawer-direction=right]:border-l 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=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        <div className="mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-none bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex flex-col 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:gap-2 md:text-left",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn(
+        "cn-font-heading text-lg tracking-wider text-foreground uppercase",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn(
+        "mt-0.5 text-sm leading-relaxed text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
diff --git a/apps/v4/styles/radix-sera/ui/dropdown-menu.tsx b/apps/v4/styles/radix-sera/ui/dropdown-menu.tsx
new file mode 100644
index 0000000000..b8d26262a4
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/dropdown-menu.tsx
@@ -0,0 +1,273 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        align={align}
+        className={cn(
+          "cn-menu-target cn-menu-translucent z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase data-inset:pl-9.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1.5 my-1.5 h-px bg-border/50", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="cn-rtl-flip ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "cn-menu-target cn-menu-translucent z-50 min-w-36 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
diff --git a/apps/v4/styles/radix-sera/ui/empty.tsx b/apps/v4/styles/radix-sera/ui/empty.tsx
new file mode 100644
index 0000000000..0419891e7d
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/empty.tsx
@@ -0,0 +1,104 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 border-dashed p-12 text-center text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn("flex max-w-sm flex-col items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "flex size-10 shrink-0 items-center justify-center rounded-none bg-muted text-foreground [&_svg:not([class*='size-'])]:size-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn(
+        "cn-font-heading text-lg tracking-wider uppercase",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "mt-0.5 text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}
diff --git a/apps/v4/styles/radix-sera/ui/field.tsx b/apps/v4/styles/radix-sera/ui/field.tsx
new file mode 100644
index 0000000000..863fcdff43
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/field.tsx
@@ -0,0 +1,238 @@
+"use client"
+
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/styles/radix-sera/ui/label"
+import { Separator } from "@/styles/radix-sera/ui/separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-3 font-semibold uppercase data-[variant=label]:text-xs data-[variant=legend]:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-10 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+        horizontal:
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        responsive:
+          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-1 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-relaxed group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-4 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-xs font-semibold tracking-wide uppercase group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-left text-sm leading-normal font-normal tracking-normal text-muted-foreground normal-case group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}
diff --git a/apps/v4/styles/radix-sera/ui/hover-card.tsx b/apps/v4/styles/radix-sera/ui/hover-card.tsx
new file mode 100644
index 0000000000..67f7df3086
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/hover-card.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import { HoverCard as HoverCardPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-72 origin-(--radix-hover-card-content-transform-origin) bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/apps/v4/styles/radix-sera/ui/input-group.tsx b/apps/v4/styles/radix-sera/ui/input-group.tsx
new file mode 100644
index 0000000000..d9da476e55
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/input-group.tsx
@@ -0,0 +1,153 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/styles/radix-sera/ui/button"
+import { Input } from "@/styles/radix-sera/ui/input"
+import { Textarea } from "@/styles/radix-sera/ui/textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex h-10 w-full min-w-0 items-center rounded-none border border-transparent border-b-input bg-transparent transition-[color,border-color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-none has-data-[align=block-start]:rounded-none has-[[data-slot=input-group-control]:focus-visible]:border-b-ring has-[[data-slot][aria-invalid=true]]:border-b-destructive has-[textarea]:rounded-none has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:border-b-destructive/50 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-none **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first",
+        "inline-end": "order-last",
+        "block-start":
+          "order-first w-full justify-start pt-3 group-has-[>input]/input-group:pt-3.5 [.border-b]:pb-3.5",
+        "block-end":
+          "order-last w-full justify-start pb-3 group-has-[>input]/input-group:pb-3.5 [.border-t]:pt-3.5",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 rounded-none text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-none px-1.5 text-xs [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs": "size-6 p-0 text-xs has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 border-0 bg-transparent ring-0 group-has-[>[data-align=inline-end]]/input-group:pr-2 group-has-[>[data-align=inline-start]]/input-group:pl-2 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none border-0 bg-transparent py-2.5 ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}
diff --git a/apps/v4/styles/radix-sera/ui/input-otp.tsx b/apps/v4/styles/radix-sera/ui/input-otp.tsx
new file mode 100644
index 0000000000..61d61ef29f
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/input-otp.tsx
@@ -0,0 +1,86 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { MinusIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        "cn-input-otp flex items-center has-disabled:opacity-50",
+        containerClassName
+      )}
+      spellCheck={false}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn(
+        "flex items-center gap-1 rounded-none has-aria-invalid:border-b-destructive dark:has-aria-invalid:border-b-destructive/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  index: number
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        "relative flex size-10 items-center justify-center border border-transparent border-b-input bg-transparent text-sm transition-[color,border-color] outline-none first:rounded-none last:rounded-none aria-invalid:border-b-destructive data-[active=true]:z-10 data-[active=true]:border-b-ring dark:aria-invalid:border-b-destructive/50",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-separator"
+      className="flex items-center [&_svg:not([class*='size-'])]:size-4"
+      role="separator"
+      {...props}
+    >
+      <MinusIcon />
+    </div>
+  )
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/apps/v4/styles/radix-sera/ui/input.tsx b/apps/v4/styles/radix-sera/ui/input.tsx
new file mode 100644
index 0000000000..2c300281f3
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/input.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-10 w-full min-w-0 border border-transparent border-b-input bg-transparent px-0 py-1 text-base transition-[color,border-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-b-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive md:text-sm dark:aria-invalid:border-b-destructive/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/apps/v4/styles/radix-sera/ui/item.tsx b/apps/v4/styles/radix-sera/ui/item.tsx
new file mode 100644
index 0000000000..3588c520f8
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/item.tsx
@@ -0,0 +1,196 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/styles/radix-sera/ui/separator"
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn(
+        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn("my-2", className)}
+      {...props}
+    />
+  )
+}
+
+const itemVariants = cva(
+  "group/item flex w-full flex-wrap items-center rounded-none border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        outline: "border-border",
+        muted: "border-transparent bg-muted/50",
+      },
+      size: {
+        default: "gap-3.5 px-4 py-3.5",
+        sm: "gap-3.5 px-3.5 py-3",
+        xs: "gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "div"
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 overflow-hidden rounded-none group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 group-data-[size=xs]/item:rounded-none [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0.5 [&+[data-slot=item-content]]:flex-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        "cn-font-heading line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-semibold tracking-wide underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        "line-clamp-2 text-left text-sm leading-relaxed font-normal text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+}
diff --git a/apps/v4/styles/radix-sera/ui/kbd.tsx b/apps/v4/styles/radix-sera/ui/kbd.tsx
new file mode 100644
index 0000000000..876026c36c
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/kbd.tsx
@@ -0,0 +1,26 @@
+import { cn } from "@/lib/utils"
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "pointer-events-none inline-flex h-5.5 w-fit min-w-5.5 items-center justify-center gap-1 rounded-none bg-muted px-1.5 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=input-group]:bg-input in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }
diff --git a/apps/v4/styles/radix-sera/ui/label.tsx b/apps/v4/styles/radix-sera/ui/label.tsx
new file mode 100644
index 0000000000..8579e8c85b
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-xs leading-relaxed font-semibold tracking-wide uppercase select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[slot=checkbox]:text-sm peer-data-[slot=checkbox]:font-medium peer-data-[slot=checkbox]:tracking-normal peer-data-[slot=checkbox]:normal-case peer-data-[slot=radio]:text-sm peer-data-[slot=radio]:font-medium peer-data-[slot=radio]:tracking-normal peer-data-[slot=radio]:normal-case",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/apps/v4/styles/radix-sera/ui/menubar.tsx b/apps/v4/styles/radix-sera/ui/menubar.tsx
new file mode 100644
index 0000000000..f4b7ed1160
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/menubar.tsx
@@ -0,0 +1,284 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+import { Menubar as MenubarPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Menubar({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn(
+        "flex h-10 items-center rounded-none border p-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return (
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  )
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn(
+        "flex items-center rounded-none px-2 py-0.75 text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "cn-menu-target cn-menu-translucent z-50 min-w-48 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPortal>
+  )
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/menubar-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-3 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-3 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  )
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn(
+        "px-3.5 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase data-inset:pl-9.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn("-mx-1 my-1 h-px bg-border/50", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="cn-rtl-flip ml-auto size-4" />
+    </MenubarPrimitive.SubTrigger>
+  )
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      className={cn(
+        "cn-menu-target cn-menu-translucent z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}
diff --git a/apps/v4/styles/radix-sera/ui/native-select.tsx b/apps/v4/styles/radix-sera/ui/native-select.tsx
new file mode 100644
index 0000000000..5747d29c0b
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/native-select.tsx
@@ -0,0 +1,65 @@
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
+  size?: "sm" | "default"
+}
+
+function NativeSelect({
+  className,
+  size = "default",
+  ...props
+}: NativeSelectProps) {
+  return (
+    <div
+      className={cn(
+        "group/native-select relative w-fit has-[select:disabled]:opacity-50",
+        className
+      )}
+      data-slot="native-select-wrapper"
+      data-size={size}
+    >
+      <select
+        data-slot="native-select"
+        data-size={size}
+        className="h-10 w-full min-w-0 appearance-none rounded-none border border-transparent border-b-input bg-transparent py-2 pr-8 pl-0 text-sm transition-[color,border-color] outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-b-ring disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-b-destructive data-[size=sm]:h-9 dark:aria-invalid:border-b-destructive/50"
+        {...props}
+      />
+      <ChevronDownIcon
+        className="pointer-events-none absolute top-1/2 right-0 size-4 -translate-y-1/2 text-muted-foreground select-none"
+        aria-hidden="true"
+        data-slot="native-select-icon"
+      />
+    </div>
+  )
+}
+
+function NativeSelectOption({
+  className,
+  ...props
+}: React.ComponentProps<"option">) {
+  return (
+    <option
+      data-slot="native-select-option"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
+}
+
+function NativeSelectOptGroup({
+  className,
+  ...props
+}: React.ComponentProps<"optgroup">) {
+  return (
+    <optgroup
+      data-slot="native-select-optgroup"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  )
+}
+
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption }
diff --git a/apps/v4/styles/radix-sera/ui/navigation-menu.tsx b/apps/v4/styles/radix-sera/ui/navigation-menu.tsx
new file mode 100644
index 0000000000..4c309731de
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/navigation-menu.tsx
@@ -0,0 +1,167 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+import { ChevronDownIcon } from "lucide-react"
+import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-none px-4.5 py-2.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        className="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "top-0 left-0 w-full p-2.5 pr-3 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow-md group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={cn(
+        "absolute top-full left-0 isolate z-50 flex justify-center"
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 md:w-(--radix-navigation-menu-viewport-width) data-open:animate-in data-open:zoom-in-90 data-closed:animate-out data-closed:zoom-out-90",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "flex items-center gap-1.5 rounded-none p-3 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none data-[active=true]:bg-muted/50 data-[active=true]:hover:bg-muted data-[active=true]:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
+        className
+      )}
+      {...props}
+    >
+      <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-none bg-border shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+}
diff --git a/apps/v4/styles/radix-sera/ui/pagination.tsx b/apps/v4/styles/radix-sera/ui/pagination.tsx
new file mode 100644
index 0000000000..9435634b94
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/pagination.tsx
@@ -0,0 +1,132 @@
+import * as React from "react"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/styles/radix-sera/ui/button"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <Button
+      asChild
+      variant={isActive ? "outline" : "ghost"}
+      size={size}
+      className={cn(className)}
+    >
+      <a
+        aria-current={isActive ? "page" : undefined}
+        data-slot="pagination-link"
+        data-active={isActive}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+function PaginationPrevious({
+  className,
+  text = "Previous",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("pl-2!", className)}
+      {...props}
+    >
+      <ChevronLeftIcon data-icon="inline-start" className="cn-rtl-flip" />
+      <span className="hidden sm:block">{text}</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  text = "Next",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("pr-2!", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">{text}</span>
+      <ChevronRightIcon data-icon="inline-end" className="cn-rtl-flip" />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn(
+        "flex size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}
diff --git a/apps/v4/styles/radix-sera/ui/popover.tsx b/apps/v4/styles/radix-sera/ui/popover.tsx
new file mode 100644
index 0000000000..4ccbe13e95
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/popover.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-none bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-1 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
+  return (
+    <div
+      data-slot="popover-title"
+      className={cn(
+        "cn-font-heading text-sm font-semibold tracking-wide",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="popover-description"
+      className={cn(
+        "mt-0.5 text-sm leading-relaxed text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+}
diff --git a/apps/v4/styles/radix-sera/ui/progress.tsx b/apps/v4/styles/radix-sera/ui/progress.tsx
new file mode 100644
index 0000000000..5cbb83ec31
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/progress.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { Progress as ProgressPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "relative flex h-0.5 w-full items-center overflow-x-hidden rounded-none bg-muted",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="size-full flex-1 bg-primary transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }
diff --git a/apps/v4/styles/radix-sera/ui/radio-group.tsx b/apps/v4/styles/radix-sera/ui/radio-group.tsx
new file mode 100644
index 0000000000..2399b56663
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/radio-group.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid w-full gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "group/radio-group-item peer relative flex aspect-square size-4.5 shrink-0 rounded-full border border-input bg-transparent outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-foreground dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-foreground",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="flex size-4.5 items-center justify-center"
+      >
+        <span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-foreground" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }
diff --git a/apps/v4/styles/radix-sera/ui/resizable.tsx b/apps/v4/styles/radix-sera/ui/resizable.tsx
new file mode 100644
index 0000000000..9656a8fab6
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/resizable.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: ResizablePrimitive.GroupProps) {
+  return (
+    <ResizablePrimitive.Group
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full aria-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: ResizablePrimitive.SeparatorProps & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.Separator
+      data-slot="resizable-handle"
+      className={cn(
+        "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="z-10 flex h-6 w-1 shrink-0 rounded-none bg-border" />
+      )}
+    </ResizablePrimitive.Separator>
+  )
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
diff --git a/apps/v4/styles/radix-sera/ui/scroll-area.tsx b/apps/v4/styles/radix-sera/ui/scroll-area.tsx
new file mode 100644
index 0000000000..9c21e0437e
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/scroll-area.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-none bg-border"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
diff --git a/apps/v4/styles/radix-sera/ui/select.tsx b/apps/v4/styles/radix-sera/ui/select.tsx
new file mode 100644
index 0000000000..0b1ea6b5a2
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/select.tsx
@@ -0,0 +1,201 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1.5 p-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-none border border-transparent border-b-input bg-transparent px-0 py-2 text-sm whitespace-nowrap transition-[color,border-color] outline-none focus-visible:border-b-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive data-placeholder:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-b-destructive/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        data-align-trigger={position === "item-aligned"}
+        className={cn(
+          "cn-menu-target cn-menu-translucent relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          data-position={position}
+          className={cn(
+            "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
+            position === "popper" && ""
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn(
+        "px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="pointer-events-none" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn(
+        "pointer-events-none -mx-1.5 my-1.5 h-px bg-border",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/apps/v4/styles/radix-sera/ui/separator.tsx b/apps/v4/styles/radix-sera/ui/separator.tsx
new file mode 100644
index 0000000000..d4570908d4
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/apps/v4/styles/radix-sera/ui/sheet.tsx b/apps/v4/styles/radix-sera/ui/sheet.tsx
new file mode 100644
index 0000000000..12eb6e530d
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/sheet.tsx
@@ -0,0 +1,149 @@
+"use client"
+
+import * as React from "react"
+import { XIcon } from "lucide-react"
+import { Dialog as SheetPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/styles/radix-sera/ui/button"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/20 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col bg-popover bg-clip-padding text-sm text-popover-foreground shadow-md transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close data-slot="sheet-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-4 right-4 bg-secondary"
+              size="icon-sm"
+            >
+              <XIcon />
+              <span className="sr-only">Close</span>
+            </Button>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-8", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-8", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn(
+        "cn-font-heading text-lg tracking-wider text-foreground uppercase",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn(
+        "mt-0.5 text-sm leading-relaxed text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/apps/v4/styles/radix-sera/ui/sidebar.tsx b/apps/v4/styles/radix-sera/ui/sidebar.tsx
new file mode 100644
index 0000000000..214d930a96
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/sidebar.tsx
@@ -0,0 +1,705 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { PanelLeftIcon } from "lucide-react"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { useIsMobile } from "@/hooks/use-mobile"
+import { Button } from "@/styles/radix-sera/ui/button"
+import { Input } from "@/styles/radix-sera/ui/input"
+import { Separator } from "@/styles/radix-sera/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/styles/radix-sera/ui/sheet"
+import { Skeleton } from "@/styles/radix-sera/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/styles/radix-sera/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <div
+        data-slot="sidebar-wrapper"
+        style={
+          {
+            "--sidebar-width": SIDEBAR_WIDTH,
+            "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+            ...style,
+          } as React.CSSProperties
+        }
+        className={cn(
+          "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  dir,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          dir={dir}
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer hidden text-sidebar-foreground md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        data-side={side}
+        className={cn(
+          "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",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon-sm"
+      className={cn(className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon className="cn-rtl-flip" />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "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] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "relative flex w-full flex-1 flex-col 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",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn(
+        "h-8 w-full border-input bg-transparent shadow-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2 [--radius:0]", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto [--radius:0] group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "flex h-8 shrink-0 items-center rounded-none px-3 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden 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 [&>svg]:shrink-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-0.5", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-none px-3 py-2 text-left text-sm ring-sidebar-ring outline-hidden 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! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-9 text-sm",
+        sm: "h-8 text-xs",
+        lg: "h-14 px-3 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot.Root : "button"
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground 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 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-none px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground 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 peer-data-active/menu-button:text-sidebar-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const [width] = React.useState(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  })
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-none px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-none"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+  size?: "sm" | "md"
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "a"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-none px-3 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
diff --git a/apps/v4/styles/radix-sera/ui/skeleton.tsx b/apps/v4/styles/radix-sera/ui/skeleton.tsx
new file mode 100644
index 0000000000..f6c649be42
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/apps/v4/styles/radix-sera/ui/slider.tsx b/apps/v4/styles/radix-sera/ui/slider.tsx
new file mode 100644
index 0000000000..2e0dfe2eda
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/slider.tsx
@@ -0,0 +1,59 @@
+"use client"
+
+import * as React from "react"
+import { Slider as SliderPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className="relative grow overflow-hidden bg-input/50 data-horizontal:h-0.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-0.5"
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className="absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="block size-3 shrink-0 border-none bg-primary transition-colors select-none hover:ring-2 hover:ring-ring/30 focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }
diff --git a/apps/v4/styles/radix-sera/ui/sonner.tsx b/apps/v4/styles/radix-sera/ui/sonner.tsx
new file mode 100644
index 0000000000..c7965f834e
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/sonner.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/apps/v4/styles/radix-sera/ui/spinner.tsx b/apps/v4/styles/radix-sera/ui/spinner.tsx
new file mode 100644
index 0000000000..a70e713c5b
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/spinner.tsx
@@ -0,0 +1,16 @@
+import { Loader2Icon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }
diff --git a/apps/v4/styles/radix-sera/ui/switch.tsx b/apps/v4/styles/radix-sera/ui/switch.tsx
new file mode 100644
index 0000000000..7dd2280620
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/switch.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-none border transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-[size=default]:h-4.5 data-[size=default]:w-8.25 data-[size=sm]:h-3.5 data-[size=sm]:w-6.25 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-unchecked:border-input/50 data-unchecked:bg-input data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block bg-background ring-0 transition-transform group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-2.5 data-checked:translate-x-[calc(100%+2px)] dark:data-checked:bg-primary-foreground data-unchecked:translate-x-0.25 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
diff --git a/apps/v4/styles/radix-sera/ui/table.tsx b/apps/v4/styles/radix-sera/ui/table.tsx
new file mode 100644
index 0000000000..6c0e3e8d69
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/table.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-12 px-3 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/apps/v4/styles/radix-sera/ui/tabs.tsx b/apps/v4/styles/radix-sera/ui/tabs.tsx
new file mode 100644
index 0000000000..0cb0d6ddc1
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/tabs.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center p-1 text-muted-foreground group-data-horizontal/tabs:h-10 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-4 group-data-vertical/tabs:py-2 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
diff --git a/apps/v4/styles/radix-sera/ui/textarea.tsx b/apps/v4/styles/radix-sera/ui/textarea.tsx
new file mode 100644
index 0000000000..642ea88051
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full resize-none rounded-none border border-transparent border-b-input bg-transparent px-0 py-3 text-base transition-[color,border-color] outline-none placeholder:text-muted-foreground focus-visible:border-b-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive md:text-sm dark:aria-invalid:border-b-destructive/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/apps/v4/styles/radix-sera/ui/toggle-group.tsx b/apps/v4/styles/radix-sera/ui/toggle-group.tsx
new file mode 100644
index 0000000000..fa6ef6da00
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/toggle-group.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { type VariantProps } from "class-variance-authority"
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/styles/radix-sera/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+  orientation: "horizontal",
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  orientation = "horizontal",
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      data-orientation={orientation}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[spacing=0]:data-[variant=outline]:rounded-none data-vertical:flex-col data-vertical:items-stretch",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider
+        value={{ variant, size, spacing, orientation }}
+      >
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-6 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-4 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-4 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-none group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-none data-[state=on]:bg-muted data-[state=on]:text-foreground group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/apps/v4/styles/radix-sera/ui/toggle.tsx b/apps/v4/styles/radix-sera/ui/toggle.tsx
new file mode 100644
index 0000000000..1b13301b93
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/toggle.tsx
@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Toggle as TogglePrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "group/toggle inline-flex items-center justify-center gap-1.5 rounded-none text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-muted",
+      },
+      size: {
+        default:
+          "h-10 min-w-10 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
+        sm: "h-9 min-w-9 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        lg: "h-11 min-w-11 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }
diff --git a/apps/v4/styles/radix-sera/ui/tooltip.tsx b/apps/v4/styles/radix-sera/ui/tooltip.tsx
new file mode 100644
index 0000000000..d483e4aef5
--- /dev/null
+++ b/apps/v4/styles/radix-sera/ui/tooltip.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-none bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-none data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-none bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
diff --git a/apps/v4/styles/radix-vega/ui/button-group.tsx b/apps/v4/styles/radix-vega/ui/button-group.tsx
index 2cd9800363..2ad56a4537 100644
--- a/apps/v4/styles/radix-vega/ui/button-group.tsx
+++ b/apps/v4/styles/radix-vega/ui/button-group.tsx
@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils"
 import { Separator } from "@/styles/radix-vega/ui/separator"
 
 const buttonGroupVariants = cva(
-  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  "group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
     variants: {
       orientation: {
diff --git a/apps/v4/styles/radix-vega/ui/field.tsx b/apps/v4/styles/radix-vega/ui/field.tsx
index f00fc2fd10..d0249d6315 100644
--- a/apps/v4/styles/radix-vega/ui/field.tsx
+++ b/apps/v4/styles/radix-vega/ui/field.tsx
@@ -120,7 +120,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-label"
       className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
         className
       )}
       {...props}
diff --git a/packages/shadcn/src/preset/preset.ts b/packages/shadcn/src/preset/preset.ts
index 52cf907239..cc0fac5ea7 100644
--- a/packages/shadcn/src/preset/preset.ts
+++ b/packages/shadcn/src/preset/preset.ts
@@ -109,6 +109,7 @@ export const PRESET_FONTS = [
   "ibm-plex-sans",
   "source-sans-3",
   "instrument-sans",
+  "eb-garamond",
 ] as const
 export const PRESET_FONT_HEADINGS = ["inherit", ...PRESET_FONTS] as const
 
diff --git a/packages/shadcn/src/preset/presets.ts b/packages/shadcn/src/preset/presets.ts
index abc8b38f56..4a69aa9404 100644
--- a/packages/shadcn/src/preset/presets.ts
+++ b/packages/shadcn/src/preset/presets.ts
@@ -105,13 +105,13 @@ export const DEFAULT_PRESETS = {
   },
   sera: {
     title: "Sera",
-    description: "Lucide / Inter + Playfair Display",
+    description: "Lucide / Noto Sans + EB Garamond",
     style: "sera",
-    baseColor: "neutral",
-    theme: "neutral",
-    iconLibrary: "phosphor",
-    font: "inter",
-    fontHeading: "playfair-display",
+    baseColor: "taupe",
+    theme: "taupe",
+    iconLibrary: "lucide",
+    font: "noto-sans",
+    fontHeading: "eb-garamond",
     menuAccent: "subtle" as const,
     menuColor: "default" as const,